在特定行下面添加tr

Add tr below specific row

本文关键字：添加 tr      更新时间：2023-09-26

我有一个表，每一行都有不同的记录。点击"显示"链接后，在td。我想在当前tr的下面显示另一个tr。

我在点击"显示"链接后调用"opentr"函数。如何使用链接id" uniqueid"在当前tr后添加新的tr 

<table id="table" border="0">
<th>Col 1</th> <th>Col2</th> <th>col3</th>
<tbody>
<tr>
<td>
    <a onclick ="opentr();" id="uniqueid">show</a>
</td>
<td>
    <input type="text"></input>
</td>
<td>
    <input type="text"></input>
</td>
</tr>
</tbody>
</table>

这是一个香草js示例。注意，在html的"onclick"处理程序中添加了"this"。

如果你愿意，我可以展示如何添加一个全局处理程序，将照顾所有行的onclick链接。

function opentr(el) {
    var currTR = el.parentNode.parentNode;
    var newTR = document.createElement("tr");
    newTR.innerHTML = "<td>Col 1</td><td>Col 2</td><td>Col 3</td>";
    currTR.parentNode.insertBefore(newTR, currTR.nextSibling);
}
.after { font-weight: bold }
<table id="table" border="0">
<th>Col 1</th> <th>Col2</th> <th>col3</th>
<tbody>
<tr>
<td>
    <a onclick ="opentr(this);" id="uniqueid">show</a>
</td>
<td>
    <input type="text"></input>
</td>
<td>
    <input type="text"></input>
</td>
</tr>
</tbody>
</table>

我在这个示例中找到了解决方案http://live.datatables.net/harurej/1/edit

这是我的代码

        $('#tablaConsolidado tbody').on('click', 'td.details-control', function () {
           var tr = $(this).closest('tr');
            var row = table.row(tr);
           if (table.row(tr).child.isShown() ) {
               // This row is already open - close it
               table.row(tr).child.hide();
               tr.removeClass('shown');
           }
           else {
                // Open this row
                 ajax().done(function(result) {
                  // Code depending on result
                     tr.addClass('shown');
                     table.row(tr).child(
                        $(result.d)
                    ).show();
               }).fail(function() { 
                   // An error occurred
               }); 
           }
       });

这对我有用

function opentr() 
{
  var oldTr = $('.uniqueid').parents("tr:first");
  var newTr = $("<tr><td></td></tr>");
  oldTr.after(newTr);
}

@Raj

我相信你正在寻找这样的东西。http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_table_insertrow

我粘贴了对该链接的代码进行了轻微修改，并使用了您的表结构。

<table id="myTable" border="0">
<th>Col 1</th> <th>Col2</th> <th>col3</th>
<tbody>
<tr>
<td>
    <a onclick ="opentr(this);" href='#' id="uniqueid">show</a>
</td>
<td>
    <input type="text"></input>
</td>
<td>
    <input type="text"></input>
</td>
</tr>
</tbody>
</table>
<script>
function opentr(anchor) {
    var currentTr = anchor.parentElement.parentElement;
    var table = currentTr.parentElement;
    var row = table.insertRow(currentTr.rowIndex);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(1);
    cell1.innerHTML = "NEW CELL1";
    cell2.innerHTML = "NEW CELL2";
    cell3.innerHTML = "NEW CELL3";
}
</script>
相关文章：