I have table in the dom that looks like this
<div id="table">
<table>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
</div>
I want to iterate through this table, such as $('#table').each(function(){}) but I only want to iterate through the second column. So the ones which in this example have a value of b.
Any ideas how to do this?
Thank you!
Try this:
$("table tr td:nth-child(2)").each(function () {
});
Using the nth-child selector in jQuery, this should work:
$("#table").find("td:nth-child(2)").each(function () {
});
This uses the nth-child selector, http://api.jquery.com/nth-child-selector/ , which as the link states, would select all <td> elements that are the 2nd child of their parent (which would be a <tr>).
Here's a fiddle that demonstrates it: http://jsfiddle.net/GshRz/
If you are looking for a selector that gets the <td>s that are only immediately in the table (like not in a nested table), then use something like:
$("#table").children("tbody").children("tr").children("td:nth-child(2)").each(function () {
});
http://jsfiddle.net/GshRz/1/
Depending on your structure (where you might include a <thead>), you could use .children("thead, tbody") instead of just .children("tbody").
Also, in case you want to be grabbing several columns, it could be easier to select the <tr> elements and then get their children <td> elements. For example:
$("#table1").children("tbody").children("tr").each(function (i) {
var $this = $(this);
var my_td = $this.children("td");
var second_col = my_td.eq(1);
var third_col = my_td.eq(2);
console.log("Second Column Value (row " + i + "): " + second_col.html());
console.log("Third Column Value (row " + i + "): " + third_col.html());
});
http://jsfiddle.net/GshRz/2/
What selectors you use and where, is up to the structure and content of your table. So remember to differentiate between children and find, and nth-child and eq.
$("#table td:nth-child(2)").each(function (index) {
alert('Row no. ' + (index+1) + ', Column 2 : ' + $(this).html());
});
Sample
Related
How can I get the last td of a table and remove it? It should be only JS, no jquery.
I tried this:
e.target.parentNode.querySelector("td:lastcell").remove();
var t = document.getElementById("test"); // The table
var lastTD = t.querySelector("TD:last-of-type");
console.log ("Text: " + lastTD.innerText);
<table id="test">
<tr>
<td>A</td>
<td>B</td>
</tr>
</table>
element.children should get you all the children as an array you can get the last child simply by element.children[element.children.length -1] and do whatever you want with it.
Also if your table has an id you can get the last td by using document.querySelect('#table-id td:last-child') or use document.querySelectAll('#table-id td:last-child') to get all the last tds
I have a table and need to build json array. I need value from 1 and 4 column of table.
HTML
<table class="table table-striped" id="development_mapping">
<thead>
<tr>
<th>Visual Feature</th>
<th>Step</th>
<th>Output</th>
<th>Data Feature</th>
</tr>
</thead>
<tbody>
<tr><td>color</td>
<td><select id="sss"><option data-id="528092be144b4fbf65893404" selected="selected">first-step</option><option data-id="52809373144b4fbf6589340c">kmeans</option></select></td>
<td><select id="ooo"><option data-id="output" selected="selected">output</option></select></td>
<td><input id="value1" class="feature-execution"value="id"></td></tr></tbody>
</table>
Here is my solution, a function to made an json array from table
JAVASCRIPT
var jsonArray = {};
$('#development_mapping').find('tr').each(function () {
var name = $(this).find('td:first').text();
jsonArray[name] = {
variable : $(this).find('td:eq(3)').text()
};
});
I have done, but not understand, why I get " " from value of 4 column. I mean, why variable in variable is always getting " "
This is my DEMO
Your selector: $('#development_mapping').find('tr') is selecting all <tr> tags in the table. Even the one in the <thead>! The <thead> doesn't have <td> tags, so that's where the " " is coming from.
Try this:
$('#development_mapping').find('tbody tr').each(function () {
var name = $(this).find('td:first').text();
jsonArray[name] = {
variable : $(this).find('td:eq(3)').text()
};
});
You are using .text() but there is no actual text in your 3rd td tag.
try this maybe?
variable : $(this).find('td:eq(3) input').val()
There are 2 problems with your code.
Remove the surrounding <tr> in your table head definition.
Use this to access input value
variable: $(this).find('td:eq(3) > input').first().val()
$.find() will return a collection and you'll need to get the first object of the collection for further use. Plus, you'll need to search for input inside the cell, not the cell itself.
Here is the working fiddle: http://jsfiddle.net/toshkaexe/7q3KP/
I am trying to append a string, myoutput, right after a specific row in a table similar to this one:
<table>
<tr data-my_id='1'> <td> content </td> </tr>
<tr data-my_id='2' data-my_other_id='1' > <td> content </td> </tr>
<tr data-my_id='3' data-my_other_id='2' > <td> content </td> </tr>
</table>
So let's say I want to append my output string after the tr with data-my_other_id='2'
(note that in my code, my_other_id = 2 already )
I am trying to accomplish it doing this:
var want = $("tr").find("[data-my_other_id='" + my_other_id + "']").index();
after finding the index, I want to append my output strhing to this row...
$(want).insertAfter(...?);
Also... I noticed whenever I do
alert( want = $("tr").find("[data-my_other_id='" + my_other_id + "']").length)
I get 0 ...
Help please and let me know if my question is not clear enough so I can explain better.
I'm assuming you want to update the content rather than append, but it doesn't really change anything. I don't think you want to use find() that way. Try something like:
var $row = $('tr[data-my_other_id="' + id + '"]');
// should be the index of the tr in the <table>
// this may not be a good idea though - what if you add a header row later?
var index = row.index() + 1; // if you want 1-based indices
$row.find("td").text("I am row #" + index);
This is because find will no search siblings, only children. Try attaching your search to table.
html:
<table>
<tr data-my_id='1'> <td> content </td> </tr>
<tr data-my_id='2' data-my_other_id='1' > <td> content </td> </tr>
<tr data-my_id='3' data-my_other_id='2' > <td> content </td> </tr>
</table>
js:
var my_other_id = 2;
alert( $("table").find("[data-my_other_id='" + my_other_id + "']").length);
demo: http://jsfiddle.net/gDb3A/
You don't need to use the find method since the data attribute is on the tr itself. Also your use of index is not going to work. Try the following instead.
$("tr[data-my_other_id='" + my_other_id + "']").insertAfter(...?);
find looks for descendents. A TR can not be a descendent of itself.
Try using filter()
$("tr").filter("[data-my_other_id='" + my_other_id + "']").index();
Find in the specific table so it will be faster, you can use this method.
Js:
$('any-button').click(function(){
var id = 23;
var $row = $('.your-class tbody tr[data-id="' + id + '"]');
$row.remove();
});
Html
<table class="table table-striped your-class">
<thead>
<tr>...<tr/>
</thead>
<tbody>
<tr data-id="23">Some text</tr>
<tr data-id="43">Some text</tr>
<tr data-id="43">Some text</tr>
</tbody>
</table>
<table id="myTable0" name="myTable0">
<tbody>
<tr>
</tr>
</tbody>
</table>
<table id="myTable1" name="myTable1">
<tbody>
<tr>
</tr>
</tbody>
</table>
I need some JQuery that will attempt to append new html to the end of a table and do it on the enter key, it will also select the correct table to append it to as there are numerous tables.
Here is my code that doesn't work but attempts to do this:
for (i=0; i<2; i++)
{
$("#newComment" + i).keyup(function(event){
if(event.keyCode == 13){
var $test= $('<tr><td>content here</td></tr>');
$('#myTable '+ i + ' > tbody:last').append($test);
}
}
The line that is throwing me problems is the Jquery select which follows:
$('#myTable '+ i + ' > tbody:last').append($newdiv1);
Try this:
$('#myTable' + i + ' > tbody:last').append($newdiv1);
The space $('#myTable ' is the problem..
You are having space between #myTable and 0..
You need #myTable0 while you were having #myTable 0
Yup this is very simple
just do like this
$('#myTable'+ i).find('tr:last').append($test);
And thats done.
Is there a typo? I think you mean $test instead if $newdiv1 in a problematic line.
I can see you have only one <tbody> tag so the ':last' selector is not necessary. I think that
$('#myTable' + i + ' tbody').append($test);
will be fine.
Edit: Yup, as Rajat Singhal said remove sapce in selector after #myTable.
Afternoon,
I wish to pass the row number of a table to a function to reference that specific row in that specific table, for example say I have this:
<table id="foo">
<tr><td>some stuff...</td><tr>
<tr><td>stuff</td><tr>
<tr><td>more stuff</td><tr>
<tr><td>some stuff</td><tr>
<tr><td>some stuff</td><tr>
</table>
and I have looped through the table rows and obtained the index, so in this example say I wanted to do something with the third row (which would have an index of 2, the one which has the contents "more stuff"). And I passed this through a function, like this
manipulateRow(2)
and this is my whole function
function manipulateRow(rowIndex){
/* do something */
}
How do you refer the rowIndex parameter to the table within the function? For example:
$('#foo').child("tr")[rowIndex].html('<td>i now contain even more stuff!</td>'); // I know this is wrong, how do I make it right?
Sorry if I'm being a bit thick or not explaining myself.
Easy.
$("#foo tr:eq("+rowIndex+")").html("<td>i now contain even more stuff!</td>");
Learn more about jQuery selectors here: http://api.jquery.com/category/selectors/
that could work actually only like this:
$($('#foo tr')[rowIndex]).html('<td>i now contain even more stuff!</td>');
but best to use :eq
Try this
$('#foo > tr').eq(rowIndex).html('<td>i now contain even more stuff!</td>');
function manipulateRow(rowIndex) {
var $row = $('#foo tr:nth-child(' + rowIndex + ')');
...
}
See nth-child-selector.
here you go:
<table>
<tbody>
<tr><td>Foo</td></tr>
</tbody>
<tfoot>
<tr><td>footer information</td></tr>
</tfoot>
</table>
$("#myTable > tbody").append("<tr><td>row content</td></tr>");
heres another example inline editing:
function editRow(row) {
$('td',row).each(function() {
$(this).html('<input type="text" value="' + $(this).html() + '" />');
});
}