change text in table cell using rowIndex and cellIndex - javascript

I got index of a row. Column count is static so I know in which column to put what, but what I want is to be able using onclick event handler to change content in the specific cell. the element which has this onclick event applied is outside the table with all the text inputs that I want to copy contents from. a brief example
<table id="table1">
<tr>
<td>SomeText</td>
<td>SomeOtherText</td>
</tr>
<tr>
<td>SomeText2</td>
<td>SomeOtherText2</td>
</tr>
</table>
<div id="box1">
<form>
<input type="text" name="newText"/>
<input type="button" onclick="?" />
</form>
</div>

You can get to this specific cell using something like:
$('#table1 tr:eq(1) td:eq(1)')
Here it will select second row's second column (it's 0 based counting).
And then you can use jQuery.text() or jQuery.html().
You may do something like the following:
<table id="table1">
<tr>
<td>SomeText</td>
<td>SomeOtherText</td>
</tr>
<tr>
<td>SomeText2</td>
<td>SomeOtherText2</td>
</tr>
</table>
Then in you onclick method you can do something like following:
$('#table1 tr:eq(1) td:eq(1)').text("Whatever text you want");
OR
$('#table1 tr:eq(1) td:eq(1)').html("Whatever text you want");

you can use the java script and id.
<table id="table1">
<tr>
<td id=r1c1>SomeText</td>
<td id=r1c2>SomeOtherText</td>
</tr>
<tr>
<td id=r2c1>SomeText2</td>
<td id=r2c2>SomeOtherText2</td>
</tr>
</table>
<script>
function updatetxt(){
x=Document.getElementById(r1c1);
x.value=Document.getElementById(txt1).value
}
</script>
<div id="box1">
<form>
<input type="text" id=txt1 name="newText" />
<input type="button" onclick="updatetxt()" />
</form>
</div>

Related

Sort table rows based on background-color using jquery

This is my FIDDLE
<table>
<tr>
<td>
<div style="background:blue;color:white">hello</div>
</td>
</tr>
<tr>
<td>
<div style="background:pink;color:white">hello</div>
</td>
</tr>
<tr>
<td>
<div style="background:blue;color:white">hello</div>
</td>
</tr>
<tr>
<td>
<div style="background:green;color:white">hello</div>
</td>
</tr>
<tr>
<td>
<div style="background:pink;color:white">hello</div>
</td>
</tr>
<tr>
<td>
<div style="background:green;color:white">hello</div>
</td>
</tr>
</table>
How do i rearrange the html table rows based on color? I want to group html table rows based on the background color of the rows.
Use sort() to sorting array of tr elements. You can get backgroud-color of element in function of sort and set arrangement of every element.
$("table tr").sort(function (a, b){
return $("div", b).css("background") < $("div", a).css("background") ? 1 : -1;
}).appendTo('table');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<div style="background:blue">hello</div>
</td>
</tr>
<tr>
<td>
<div style="background:pink">hello</div>
</td>
</tr>
<tr>
<td>
<div style="background:blue">hello</div>
</td>
</tr>
<tr>
<td>
<div style="background:green">hello</div>
</td>
</tr>
<tr>
<td>
<div style="background:pink">hello</div>
</td>
</tr>
<tr>
<td>
<div style="background:green">hello</div>
</td>
</tr>
</table>
I reviewed your question, I think you want to differentiate each tr by there color, adding html, style and script for you here.
Here is the Html
<table>
</tbody>
<tr><td>123</td></tr>
<tr><td>123</td></tr>
<tr><td>123</td></tr>
<tr><td>123</td></tr>
<tr><td>123</td></tr>
</table>
Do add this script, by this function all your tr will have unique classes. you can add there background colors etc style on the base of class
<script>
// please do add jQuery file to prevent error
function adddClass() {
for(i=1; i<=6; i++) {
alert("");
jQuery('table tr:nth-child('+ i +')').addClass("color"+i);
}
}
adddClass();
</script>
Here is the style for background color of each table row tr
<style>
.color1{background-color:orange;}
.color2{background-color:teal;}
.color3{background-color:red;}
.color4{background-color:#717171;}
.color5{background-color:khaki;}
.color6{background-color:lightgray;}
tr, table, body{width:100%;}
</style>
Hope this will help, Thanks.!
You can easily do it in javascript.
Initiate an empty js object like this var colorRowmap = {}
Loop through all elements(tr elements) of table and get colorName from each tr. And if that color does not exist as a key of colorRowMap object do colorRowMap[colorName] = [currentTableRow] else do colorRowMap[colorName] = colorRowMap[colorName].push(currentTableRow)
Empty the table.
Loop through all keys of colorRowMap and push the tr roows to table.
Done. :)

Changing Text in Javascript From HTML Input Field

So I am setting up Jeopardy game.
For the grid I am using HTML Tables. The first row has generic text right now ("Category 1 Name" for example).
Above the first row there will be another table with an HTML input box where the user can change the category name into whatever they want.
My problem is, I thought I would use document.getElementById("").innerHTML etc. to do this but that does not work.
How do I make it so that a user can input text into the form field and that entry changes the text in the table cell (td)?
This is what I have right now for the input field:
<table id="table1">
<tr>
<td>
<form>
<input type="text" placeholder="Category 1 Name">
<button>Submit</button>
</form>
</td>
</tr>
</table>
This is what I have for the box that I want to change the text:
<table>
<tr>
<td class="cat1">Category 1 Name</td>
</tr>
</table>
Thank you.
Would this solution be OK for you?:
function setCat1Name() {
document.getElementsByClassName("cat1")[0].textContent = document.getElementById("myInput").value
}
<table id="table1">
<tr>
<td>
<form>
<input id="myInput" type="text" placeholder="Category 1 Name">
<button onclick="setCat1Name()">Submit</button>
</form>
</td>
</table>
<table>
<tr>
<td class="cat1">Category 1 Name</td>
</tr>
</table>

How to set background color for each column in table?

I have a table with four columns and two rows, 4th column have a button for each rows, now I want to change the background color in the second column of second row while click the button for each rows. Please let me know how to do this.
Here I have placed my code for your reference.
$(function(){
$('input').click(function(){
$('table').find('tr td:eq(1)').css('background-color', 'red');
});
});
HTML
<table border="1" style="border-collapse:collapse;">
<tr>
<td>1</td>
<td>jai</td>
<td>description</td>
<td><input type="button" value="button"></input></td>
</tr>
<tr>
<td>2</td>
<td>sul</td>
<td>description</td>
<td><input type="button" value="button"></input></td>
</tr>
</table>
Find the tr containing the button using closest(), then find the second column using that
$(function() {
$('input').click(function() {
$(this).closest('tr').find('td:eq(1)').css('background-color', 'red');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="1" style="border-collapse:collapse;">
<tr>
<td>1</td>
<td>jai</td>
<td>description</td>
<td>
<input type="button" value="button"></input>
</td>
</tr>
<tr>
<td>2</td>
<td>sul</td>
<td>description</td>
<td>
<input type="button" value="button"></input>
</td>
</tr>
</table>
You don't need to use a heavy JavaScript / jQuery for this case. Instead you can use <col>:
<table border="1" style="border-collapse:collapse;">
<col style="background-color: #f00;" />
<col style="background-color: #0f0;" />
<col style="background-color: #00f;" />
<col style="" />
<tr>
<td>1</td>
<td>jai</td>
<td>description</td>
<td><input type="button" value="button" /></td>
</tr>
<tr>
<td>2</td>
<td>sul</td>
<td>description</td>
<td><input type="button" value="button" /></td>
</tr>
</table>
Also note that you don't have </input> which might fail some code (eg. syntax highlighters).
Try this,
If you are aware of parent() in jquery then you can also try this,
$(function() {
$('input').click(function() {
$(this).parent().parent().find('td:eq(1)').css('background-color', 'red');
});
});
" $(this).parent().parent().find('td:eq(1)') " In this line of js, it will move to its parent tag twice, means $(this) is clicked input control and from that it will move to its parent tag twice to reach to its tag and from that position it will find the td at position 1. From here onwards you can do your color changing operation like shown in above js code.

How to get table row by using id in html?

How to get tr count from html table by using Id.Please check my code below
<table id="tableId">
<tr id="a">
<td>a</td>
</tr>
<tr id="b">
<td>b</td>
</tr>
Now I want to find rowNumber by using row Id.for example my rowId is 'b' I want to find rowNumber for this Id.Any one help me
Here you go
var table = document.getElementById("tableId");
var rowIndex = document.getElementById("b").rowIndex;
table.deleteRow(rowIndex);
Added the code for deletion, as requested in the comments below.
It's very using with jquery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var rowCount = $('table#tableId tr:#b').index() + 1;
alert(rowCount);
$("#b").remove() // For Remove b Row (tr)
});
</script>
Your HTML
<table id="tableId">
<tr id="a">
<td>a</td>
</tr>
<tr id="b">
<td>b</td>
</tr>
</table>
If you want to remove the row with id b
$("#b").remove()
If you have the Id within any cell, then the below should work
document.getElementById("myID "+tempIdx).parentNode.parentNode.rowIndex;
provided table is in the below format
<table>
<tr>
<td>
<p id="myID 1" />
</td>
<td>xxx</td>
</tr>
<td>yyy</td>
<td>
<p id="myID 2" />
</td>
</tr>
<td>
<p id="myID 3" />
</td>
</tr>
</table>
The first .parentNode will give the CELL the second will give the ROW, then get the INDEX from the ROW

Get nearest input element from same div

Let's say I have next construction
<table id="mainTable">
<tr>
<td>
<div class="parentDiv">
<input class="childInput"/>
<table>
<tbody>
<tr>
<td>
<span>I am here!</span>
<td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
How can I get input element from span? Using jQuery or standart methods.
mainTable has many rows so I can't use id on input.
I can do it with:
$($(spanElement).parents(".parentDiv")[0]).children(".childInput")[0]
Do you know an easier way?
$(spanElement).closest('.parentDiv').find('input');
$(spanElement).closest('.parentDiv').find('.childInput');

Categories