在html中的指定索引處插入新行

我正在使用html表格。我想要像按鈕單擊一樣動態地向該表插入新行。我被這樣試了，在html中的指定索引處插入新行

var rows = $(this.element).find("tbody").find("tr"); 
prevElem = rows[index]; 
$("<tr><td>data</td><tr>").insertBefore(prevElem);

但是，它不起作用。如何在指定索引處插入新行？

在此先感謝，

-Raja。

來源

2012-03-27 Rajagopal 웃

看一看here：

$('#txtIndex').val($('#tblAddMe tbody tr').length); 
 
$('#btnAdd').click(function() { 
 
    var indx = $('#txtIndex').val() - 1; 
 
    var newRow = $('<tr><td>New Row Added' + $('#tblAddMe tbody tr').length + '</td></tr>'); 
 
    newRow.insertBefore($('#tblAddMe tbody tr:nth(' + indx + ')')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="tblAddMe"> 
 
    <tbody> 
 
    <tr> 
 
     <td>Row 1</td> 
 

 
    </tr> 
 
    <tr> 
 
     <td>Row 2</td> 
 

 
    </tr> 
 
    </tbody> 
 
</table> 
 
<input id="txtIndex" /> 
 
<button type="button" id="btnAdd">Add</button>

我曾經做過一個元素之前插入行的工作示例。

來源

2012-03-27 10:46:31 Qpirate

真棒工作夥計...感謝一百萬 – 2014-01-14 18:55:46

應該$('<tr><td>...<td></tr>').insertBefore(prevElem);

來源

2012-03-27 10:35:07 slash197

感謝您的回覆。這正是我嘗試過的。它不起作用。 – 2012-03-27 10:38:50

如果它不起作用，那麼'prevElem'不存在。 – slash197 2012-03-27 10:39:58

我正在獲取目前在指定索引處有效的確切prevElem。 – 2012-03-27 10:48:28

的索引是從零開始的，所以是第4行，你需要I-1。

它應該是：prevElem = rows[index-1];

來源

2012-03-27 10:41:40

在html中的指定索引處插入新行

回答

相關問題