将行添加到 table

Question

我正在使用以下内容：

HTML

 <table id="tracks" class="BorderedTable"   
   <tr>
    <td  style="text-align:center; background-color:#00FFFF"> 
        TITLE
    </td>
 </tr>

 <!-- This is part of a much larger loop that adds several rows -->
   <tr class="border_bottom">
     <td>
      <!-- I want to add a column after whichever of this row was clicked on -->
      <a onclick="addTableRow($('#tracks'));" > +/- </a>
    </td>
   </tr>
 </table>

JQUERY

function addTableRow(jQtable){
    jQtable.each(function(){
        var $table = $(this);
        // Number of td's in the last table row
        var n = $('tr:last td', this).length;
        var tds = '<tr>';
        for(var i = 0; i < n; i++){
            tds += '<td>&nbsp;</td>';
        }
        tds += '</tr>';
        if($('tbody', this).length > 0){
            $('tbody', this).append(tds);
        }else {
            $(this).append(tds);
        }
    });
}

这会在 table 的末尾添加一行。我怎样才能让它在另一个特定行之后添加一行？

Answer 1

要在特定元素之后追加元素，您可以使用 after() 函数：

编辑： 点击一行，在它后面追加一个新行

$(document).on('click', '#add', function() {
  $('#test').after('<tr><td>row added</td></tr>');
});

$(document).on('click', 'tr', function() {
    var that = $(this);
    that.after('<tr><td>appended after clicked tr</td></tr>');
});

table { 
  width:100%;
  border-collapse: collapse;
}
td {
  border: 1px solid #333;
}
#add {
  display: inline-block;
  padding: 10px;
  background-color: #555;
  color: #fff;
  margin-top: 30px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr id="test">
      <td>test1</td>
    </tr>
    <tr>
      <td>test2</td>
    </tr>
    <tr>
      <td>test2</td>
    </tr>
    <tr>
      <td>test2</td>
    </tr>
  </tbody>
</table>

<span id="add">add row after first row</span>

将行添加到 table

Add row to table

jquery

html

css

html-table