Question

如果我有桌子

<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>

如何使用JQuery或javascript进行搜索以获取具有文本“Second Value”的行的索引并将其删除？也可以创建一个新行

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

点击一下按钮？我是否必须遍历现有行以获取行的最后一个索引以将其插入？

Answer 1

您可以使用:contains()选择器，remove()功能和append()功能轻松实现此目的。您不需要遍历行来查找您要查找的内容。

获取索引：

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

删除它：

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

添加一行：

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

工作示例：http://jsfiddle.net/hunter/PzJWC/

Answer 2

理想情况下，你应该为每个tr / td生成id - 但是如果你动态地获取数据，那就是假设。

如果你知道表的顺序，那么你可以使用jQuery的这些sleectors

$('tr:last-child').html('<p>This is the absolouty last tr in the WHOLE page<p>')

$('tr:nth-child(even)').addClass('evenColors')

$('tr:nth-child(4n)').remove()  //Removes the 4th from the top TR DOM Element

var theValueOf = $('tr:first-child').html() //assigns the innerHtml to your var

因此，如果您有10个表，则每个表都应具有id或类

 <table id="table1"> ...bla... </table>

$('table1 tr:last-child').remove() //Remove last TR from Table1

您需要使用id和类

更多地构建html

在你的情况下，你将不得不重新组织你的表格，如何以编程方式为每一行获取唯一ID，然后使用jquery来选择它。这是理想的世界但是你做了一个循环并检查每个内部html，直到你想要的为止。并执行.remove（）

但要获得INDEX使用猎人回复！但从经验来看，这是大型动态文档的头痛问题。

Answer 3

JQuery有.insertAfter和insertBefore。对于定位，您也可以使用nth-child css选择器，或者如果您想要它是动态的（比如在它们单击的行之后插入一行），您可以使用'this'运算符和一些dom导航。所有这些都表示在动态编辑表时要非常小心，它们在可以插入的地方有很多特点，而且性能很差。

Answer 4

我刚刚做到了;）添加行（您可能不想使用追加，因为您的表可能有tbody等）：

$('#myTable tr:last').after('<tr id="forth_row"><td>forth thing</td><td>forth value</td></tr>');}

找到并删除该行：

$('#myTable').find("#forth_row").remove();

如何在Jquery或Javascript中搜索和删除/追加一行？

4 个答案: