如何搜索和jQuery的或Javascript刪除/添加行？

如果我有一個表如何搜索和jQuery的或Javascript刪除/添加行？

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

與點擊一個按鈕？我是否必須迭代現有的行才能獲取要插入的行的最後一個索引？

來源

2011-04-28 Varia

您可以使用: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>");

WOR王例子：http://jsfiddle.net/hunter/PzJWC/

來源

2011-04-28 20:52:05 hunter

理論上，應該生成每個每個TR/TD的ID - 但如果你獲得的數據多數民衆贊成動態我想。

如果你知道你的表的順序，那麼你可以使用這些sleectors從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或類

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

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

你會需要ID和類

你的情況，你必須調整你的表中的一些編程如何向atach唯一的ID每一行，然後組織你的HTML更使用jQuery來選擇它。這是理想的世界但你做一個循環，並檢查每個內部的HTML，直到你想要什麼，並做一個.remove（）

但獲得INDEX使用獵人回覆！但從經驗來看，這對於大型動態文檔而言是頭痛的問題。

來源

2011-04-28 20:57:18 ppumkin

jQuery有.insertAfter和的insertBefore。對於定位，您還可以使用第n個孩子CSS選擇器，或者如果你想讓它動態（如行後插入一行，他們點擊）你可以使用「這個」運營商和一些DOM導航。說了這麼多的飛行編輯表時要非常小心，他們對那裏的東西可以插入一些特點，並且對性能沉重。

來源

2011-04-28 20:57:42 Blue

有什麼似乎無盡的組合。最好的辦法是瀏覽jQuery文檔。在你的頁面上，在jQuery上使用IE調試器（F12）在腳本中放置一個斷點，並將手錶添加到$ jQuery;嘗試探索節點並查看它們具有的值。 – ppumkin 2011-04-28 21:36:49

我只是做了它;）添加行（你可能不希望追加使用，因爲你的表可能有TBODY等）：

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

找到並刪除該行：

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

來源

2013-04-19 04:08:14 yvonnezoe

如何搜索和jQuery的或Javascript刪除/添加行？

回答

相關問題