как вставить новую строку в HTML-таблицу с помощью JQuery

Question

Я следующий макета HTML таблицы:

<table border="1" id="staff"> 
<thead> 
    <tr> 
    <th>Company</th> 
    <th>Contact</th> 
    <th>Country</th> 
    </tr> 
</thead> 
<tbody> 
    <tr id="1"> 
    <td>Alfreds Futterkiste</td> 
    <td>Maria Anders</td> 
    <td>Germany</td> 
    </tr> 
    <tr id="2"> 
    <td>Berglunds snabbköp</td> 
    <td>Christina Berglund</td> 
    <td>Sweden</td> 
    </tr> 
    <tr id="5"> 
    <td>Centro comercial Moctezuma</td> 
    <td>Francisco Chang</td> 
    <td>Mexico</td> 
    </tr> 
    <tr id="8"> 
    <td>Ernst Handel</td> 
    <td>Roland Mendel</td> 
    <td>Austria</td> 
    </tr> 
    <tr id="9"> 
    <td>Island Trading</td> 
    <td>Helen Bennett</td> 
    <td>UK</td> 
    </tr> 
    <tr id="12"> 
    <td>Königlich Essen</td> 
    <td>Philip Cramer</td> 
    <td>Germany</td> 
    </tr> 
    <tr id="13"> 
    <td>Laughing Bacchus Winecellars</td> 
    <td>Yoshi Tannamuri</td> 
    <td>Canada</td> 
    </tr> 
<tr id="15"> 
    <td>Magazzini Alimentari Riuniti</td> 
    <td>Giovanni Rovelli</td> 
    <td>Italy</td> 
    </tr> 
    <tr id="16"> 
    <td>North/South</td> 
    <td>Simon Crowther</td> 
    <td>UK</td> 
    </tr> 
</tbody> 
</table> 

вставить новую строку с помощью следующего кода JQuery после получения извлеченного идентификатора строки. Новая строка будет вставлена ​​после этой строки, которая имеет идентификатор меньше, чем полученный идентификатор. Я могу сделать это двумя способами. 1-ый, как показано ниже:

метод: 1:

var retrieved_id = 11; 
var newRow = '<tr><td>The new row HTML...</td></tr>'; 

var previous_id = $('#staff tr').filter(function() { 
    return this.id < rank; 
}).last().attr('id'); 

var previous_row = $("#" + previous_id).closest("tr"); 
previous_row.after(newRow); 

Код хорошо работает до тех пор, пока retrieved_id> = 2 (больше или равно). Но если retrieved_id равен 1, то меньше id из 1 становится «неопределенным», так как нет идентификатора меньше 1. В этом случае я не могу вставить строку в таком положении. Я могу решить эту проблему путем непосредственного ввода в строку без указания previous_id таким путем:

метод: 2

var rank = 1; // calculate this as needed... 
var newRow = '<tr><td>The new row HTML...</td></tr>'; 

$('#staff tr').filter(function() { 
    return this.id < rank; 
}).last().after(newRow); 

Но для более поздней части моей страницы, я также должен знать previous_id, а также. Поэтому я не могу использовать метод : 2, вместо этого я должен использовать метод : 1.

Может ли кто-нибудь сказать мне, как я могу решить проблему retrieved_id = 1 с использованием метода : 1?

Answer 1

Вы можете проверить, равен ли retrieved_id1, и если да, не фильтруйте таблицу для предыдущего идентификатора и просто вставьте ее в верхней части таблицы.

var retrieved_id = 1; 
 
var newRow = '<tr><td>The new row HTML...</td></tr>'; 
 
if (retrieved_id == 1) { 
 
    if ($('table >tbody').length == 0) { 
 
    newRow = '<tbody><tr><td>The new row HTML...</td></tr></tbody>'; 
 
    $(newRow).prependTo('table'); 
 
    } else if ($('table >tbody >tr').length == 0) { 
 
    $(newRow).prependTo('table > tbody'); 
 
    } else { 
 
    $(newRow).insertBefore('table > tbody > tr:first'); 
 
    } 
 
} else { 
 
    var previous_id = $('#staff tr').filter(function() { 
 
    return this.id < retrieved_id; 
 
    }).last().attr('id'); 
 
} 
 
var previous_row = $("#" + previous_id).closest("tr"); 
 
previous_row.after(newRow);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<table border="1" id="staff"> 
 
    <thead> 
 
    <tr> 
 
     <th>Company</th> 
 
     <th>Contact</th> 
 
     <th>Country</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr id="1"> 
 
     <td>Alfreds Futterkiste</td> 
 
     <td>Maria Anders</td> 
 
     <td>Germany</td> 
 
    </tr> 
 
    <tr id="2"> 
 
     <td>Berglunds snabbköp</td> 
 
     <td>Christina Berglund</td> 
 
     <td>Sweden</td> 
 
    </tr> 
 
    <tr id="5"> 
 
     <td>Centro comercial Moctezuma</td> 
 
     <td>Francisco Chang</td> 
 
     <td>Mexico</td> 
 
    </tr> 
 
    <tr id="8"> 
 
     <td>Ernst Handel</td> 
 
     <td>Roland Mendel</td> 
 
     <td>Austria</td> 
 
    </tr> 
 
    <tr id="9"> 
 
     <td>Island Trading</td> 
 
     <td>Helen Bennett</td> 
 
     <td>UK</td> 
 
    </tr> 
 
    <tr id="12"> 
 
     <td>Königlich Essen</td> 
 
     <td>Philip Cramer</td> 
 
     <td>Germany</td> 
 
    </tr> 
 
    <tr id="13"> 
 
     <td>Laughing Bacchus Winecellars</td> 
 
     <td>Yoshi Tannamuri</td> 
 
     <td>Canada</td> 
 
    </tr> 
 
    <tr id="15"> 
 
     <td>Magazzini Alimentari Riuniti</td> 
 
     <td>Giovanni Rovelli</td> 
 
     <td>Italy</td> 
 
    </tr> 
 
    <tr id="16"> 
 
     <td>North/South</td> 
 
     <td>Simon Crowther</td> 
 
     <td>UK</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

EDIT

Или же, после вычисления previous_id проверить, является ли она undefined, и если это так, (что означает, что нет tr s с id s меньше retrieved_id) просто добавьте новый ряд в верхнюю часть таблицы,

var retrieved_id = 1; 
var newRow = '<tr><td>The new row HTML...</td></tr>'; 

var previous_id = $('#staff tr').filter(function() { 
    return this.id < retrieved_id; 
}).last().attr('id'); 
if (typeof previous_id == 'undefined') { 
    $(newRow).insertBefore('table > tbody > tr:first'); 
} 
var previous_row = $("#" + previous_id).closest("tr"); 
previous_row.after(newRow); 

Answer 2

Try используя $.inArray(), Array.prototype.splice()

var retrieved_id = 8; 
 

 
var newRow = "<tr><td>The new row HTML...</td></tr>"; 
 

 
var elems = $("#staff tbody tr").get(); 
 

 
elems.splice($.inArray($("#" + retrieved_id)[0], elems) + 1, 0, newRow); 
 

 
$("#staff tbody").html(elems);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table border="1" id="staff"> 
 
<thead> 
 
    <tr> 
 
    <th>Company</th> 
 
    <th>Contact</th> 
 
    <th>Country</th> 
 
    </tr> 
 
</thead> 
 
<tbody> 
 
    <tr id="1"> 
 
    <td>Alfreds Futterkiste</td> 
 
    <td>Maria Anders</td> 
 
    <td>Germany</td> 
 
    </tr> 
 
    <tr id="2"> 
 
    <td>Berglunds snabbköp</td> 
 
    <td>Christina Berglund</td> 
 
    <td>Sweden</td> 
 
    </tr> 
 
    <tr id="5"> 
 
    <td>Centro comercial Moctezuma</td> 
 
    <td>Francisco Chang</td> 
 
    <td>Mexico</td> 
 
    </tr> 
 
    <tr id="8"> 
 
    <td>Ernst Handel</td> 
 
    <td>Roland Mendel</td> 
 
    <td>Austria</td> 
 
    </tr> 
 
    <tr id="9"> 
 
    <td>Island Trading</td> 
 
    <td>Helen Bennett</td> 
 
    <td>UK</td> 
 
    </tr> 
 
    <tr id="12"> 
 
    <td>Königlich Essen</td> 
 
    <td>Philip Cramer</td> 
 
    <td>Germany</td> 
 
    </tr> 
 
    <tr id="13"> 
 
    <td>Laughing Bacchus Winecellars</td> 
 
    <td>Yoshi Tannamuri</td> 
 
    <td>Canada</td> 
 
    </tr> 
 
<tr id="15"> 
 
    <td>Magazzini Alimentari Riuniti</td> 
 
    <td>Giovanni Rovelli</td> 
 
    <td>Italy</td> 
 
    </tr> 
 
    <tr id="16"> 
 
    <td>North/South</td> 
 
    <td>Simon Crowther</td> 
 
    <td>UK</td> 
 
    </tr> 
 
</tbody> 
 
</table>