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>

在获取检索到的行ID后，我通过以下jquery代码插入新行。新行将插入到id小于检索到的id的行之后。我可以用两种方式做到这一点。第一个如下：

方式：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为＆gt; = 2（大于或等于）。但是如果retrieved_id为1，那么1的较少id将变为“未定义”。因为没有小于1的id。在这种情况下，我不能在这样的位置插入一行。我可以通过直接输入行而不通过这种方式标识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_id是否等于1，如果是，请不要过滤前一个ID的表格，只需将其插入表格顶部即可。

＆＃13;

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

＆＃13;

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

＆＃13;

修改

或者，在计算previous_id之后检查它是否为undefined，如果是这种情况，（这意味着没有tr具有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

尝试使用string.split(' key ')，$.inArray()

＆＃13;

Array.prototype.splice()

＆＃13;

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

＆＃13;

如何通过jquery

2 个答案: