Develop Reference

jQuery how to remove dynamically appended rows?

If I append rows to my table like this:
$('#tbody_upload').append('<tr id="' + data.originalFiles[counter].name + '"><td>' + 'Uploading...' + '</td><td></td><td></td><td></td></tr>');
how can I remove it from another event?
$('#' + this.name).remove();
that function doesn't work, also appended items don't appear in source of the page.

If you want remove the element that triggers the event to be removed (as appears from this.name) you can simply do
$(this).remove();

Maybe you should name your table and then with a selector select the body and first errase it and then append data so every time you get new data, the table deletes the old data and puts the new one.
<table id="yourtableName" border="1" class="hoverTable">
<thead>
</thead>
<tbody>
</tbody>
</table>
var gridBody = your tr code;
$('#yourtableName tbody').empty().append(gridBody);

Adding link to appended table row using jQuery

Using jQuery, I append rows to a table and each row contains an anchor tag. The jQuery is then supposed to add in a link to the anchor tag but the links do not show up. The other data (e.g., date, location) fills in fine so I'm not sure what the issue is.
jQuery:
for (var i = 1; i <= 20; i++) {
...
$('.recent-reports tbody').append('<tr><td></td><td></td><td><a class="js-pdf-download" href="">Download</a></td></tr>');
$('.recent-reports tbody tr:last').find('td').eq(0).text(date)
.find('td').eq(1).text(location)
.find('.js-pdf-download').attr("href", link)
...
}
HTML:
<table class="recent-reports">
<thead>
</thead>
<tbody>
</tbody>
</table>

Thanks to Johann found a fix while simplifying my code at the same time. Rather than appending a row to the table and then adding in the data, I now append the row with the data in one fell swoop.
$('.recent-reports tbody').append('<tr><td>' + date + '</td><td>' + location + '</td><td><a class="js-pdf-download" href="' + link + '" target="_blank">Download</a></td></tr>')
Also, a clumsier solution, but one that would have been in line with my original approach:
...
$('.recent-reports tbody tr:last').find('td').eq(0).text(date)
$('.recent-reports tbody tr:last').find('td').eq(1).text(location)
$('.recent-reports tbody tr:last').find('.js-pdf-download').attr("href", link)
...

Iterate through second columns in a table in jQuery

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

JQuery: Find (the index of) a row with a specific data attribute value

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>

How do I reference a table row using jQuery

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() + '" />');
});
}