Question

If I have a table

<table id="myTable"><tr><td>First Thing</td><td>First Value</td></tr>
<tr><td>Second Thing</td><td>Second Value</td></tr>
<tr><td>Third Thing</td><td>Third Value</td></tr>
</table>

How can I use JQuery or javascript to search to get the index of the row with text “Second Value” and remove it? Also is it possible to create a new row

<tr><td>Fourth Thing</td><td>Fourth Value</td></tr>

with the click of a button? Will I have to iterate through the existing rows to get the last index of the row to insert it in?

Answer 1

You can achieve this easily using the :contains() selector, the remove() function, and the append() function. You don’t need to iterate through the rows to find what you’re looking for.

---

To get the index:

$("#myTable").find("td:contains('Second Value')").parent().index();

To remove it:

$("#myTable").find("td:contains('Second Value')").parent().remove();

To add a row:

$("#myTable").append("<tr><td>Fourth Thing</td><td>Fourth Value</td></tr>");

---

working example: http://jsfiddle.net/hunter/PzJWC/