Question

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

点击“显示”链接后，我正在调用“opentr”功能。如何使用链接“uniqueid”的id

在当前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>

Answer 1

这是一个香草js样本。注意添加的＆＃34;这个＆＃34;在html＆＃34; onclick＆＃34;处理程序。

如果您希望我可以展示如何添加一个全局处理程序来处理所有行的onclick链接。

＆＃13;

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);
}

＆＃13;

.after { font-weight: bold }

＆＃13;

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

＆＃13;

Answer 2

我在此示例中找到了解决方案 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
               }); 

           }
       });

Answer 3

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

Answer 4

这对我有用

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

在特定行下面添加tr

4 个答案: