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

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 搜索以获取带有文本“第二值”的行的索引并将其删除？ 也可以创建一个新行

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

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

Answer 1

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

---

获取索引：

$("#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

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

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

查找并删除该行：

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

Answer 3

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

如果您知道表格的顺序，那么您可以使用 jQuery 中的这些选择器

$('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 或 class

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

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

您将需要更多地使用 id 和类来构建 html

在您的情况下，您将不得不以编程方式重组您的表格，以便将唯一的 ID 附加到每一行，然后使用 jquery 到 select 它。 这是理想的世界但是你做一个循环并检查每个内部 html 直到你想要什么并执行 a.remove()

但是要获得INDEX，请使用猎人回复。 但是从经验来看，这对于大型动态文档来说是一个令人头疼的问题。

Answer 4

JQuery 有.insertAfter 和 insertBefore。 对于定位，您还可以使用 nth-child css 选择器，或者如果您希望它是动态的（例如在他们单击的行之后插入一行），您可以使用“this”运算符和一些 dom 导航。 所有这些都说在动态编辑表格时要非常小心，它们对于可以插入东西的位置有一些特殊性并且对性能很重要。