Добавить строку в таблицу

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

Это добавляет строку в конце таблицы. Как я могу добавить строку после другой определенной строки?

Answer 1

Чтобы добавить элемент сразу после определенного элемента вы можете использовать after() функцию:

EDIT: При нажатии на строку, новая строка добавляется после

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