Question

我有以下html表格布局：

    <table id="price" class="print" crit="Medicine" scrit="2016">
    <thead><tr><th>S/N</th><th>Generic Name</th><th>Trade Name</th><th>Company</th><th>Buy Rate</th><th>Sell Rate</th><th>MRP</th><th>Action</th></tr></thead>

    <tbody>
    <tr id="111"><td>1</td><td>Aceclofenac 100mg&nbsp;Tablet</td><td>Caclotin</td><td>Reneta</td><td>1.80</td><td>3.80</td><td>4.00</td><td><a class="btn edit result ebar" href=""></a></td></tr>

    <tr id="259"><td>2</td><td>Albendazole 400mg&nbsp;Tablet</td><td>Pernil DS</td><td>Euro Pharma</td><td>2.45</td><td>5.00</td><td>5.00</td><td><a class="btn edit result ebar" href=""></a></td></tr>

    <tr id="113"><td>3</td><td>Allyestrenol&nbsp;Tablet</td><td>Gestrenol</td><td>Reneta</td><td>5.00</td><td>8.00</td><td>8.00</td><td><a class="btn edit result ebar" href=""></a></td></tr>

    <tr id="33"><td>4</td><td>Ambroxol Hydrochloride 100ml&nbsp;Syrup</td><td>Myrox</td><td>ACI</td><td>23.85</td><td>38.00</td><td>40.12</td><td><a class="btn edit result ebar" href=""></a></td></tr>

    <tr id="305"><td>5</td><td>Amoxycillin Trihydrate 500mg&nbsp;Capsule</td><td>SK-Mox 500</td><td>Eskayef</td><td>3.45</td><td>6.00</td><td>6.00</td><td><a class="btn edit result ebar" href=""></a></td></tr>

    </tbody>
    </table>

现在通过ajax，将插入一个新行。新行也有一个id，新行将在id小于新行id之后插入。让我们通过例子来理解：

    <tr id="35"><td>59</td><td>Vitamin-E 200mg&nbsp;Capsule</td><td>E-Gel</td><td>Reneta</td><td>2.00</td><td>4.00</td><td>4.01</td><td><a class="btn edit result ebar" href=""></a></td></tr>

你可以看到，新行的id是35，所以它应该在行id 33之后插入（Ambroxol Hydrochloride 100ml Syrup）。

出于这个原因，首先，我必须识别小于新行id（此处为35）的tr id（此处为33）。然后我可以在prevRow（具有id 33）之后轻松插入新行。

var prevID = $('table#price > tbody > tr').filter(function() {
  var thisId = parseInt(this.id, 10);
    return thisId < cbdata.trid; //callback id (here 35)
}).last().attr('id');

上面的jquery代码无法找到小于id，如果tr id不是顺序的，即tr id是111,259,113,33,305。它只在tr id为33,111的情况下工作， 113,259,305序列（升序或降序）。

如果现有的html表格行的id不是按升序或降序排列，如何获得少于检索到的id？

Answer 1

这样可行：

function addRow(newId, newRow) {
  // itterate all current rows getting their ids in an array
  var $tbody=$('#price').find('tbody');
  var trIds = $.map($tbody.find('tr'), function(element) {
    return Number(element.getAttribute('id'));
  })
  //add 0 to the beginning of the trIds array before we call reduce
  //this ensurse that if no number in the array is less than the new number, 0 will returned, dont use 0 is an actual id anywhere.
  trIds.unshift(0);
  var cur = trIds.reduce(function(prev, curr) {
    return (Math.abs(curr - newId) < Math.abs(prev - newId) && curr < newId ? curr : prev);
  });
  var $closestLessThanTr = $('#' + cur);
  // here we first check if there is an element with this id, if not, then our new element is the lowest id and should be added at the top of the container
  $closestLessThanTr.length > 0 ? $(newRow).insertAfter($closestLessThanTr) : $tbody.prepend(newRow);
}

var newIdValue = 35; // get this from your not-shown code somewhere
var newRowHtml = '<tr id="35"><td>59</td><td>Vitamin-E 200mg&nbsp;Capsule</td><td>E-Gel</td><td>Reneta</td><td>2.00</td><td>4.00</td><td>4.01</td><td><a class="btn edit result ebar" href=""></a></td></tr>'; // get this from your not-shown code somewhere

addRow(newIdValue, newRowHtml);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="price" class="print" crit="Medicine" scrit="2016">
  <thead>
    <tr>
      <th>S/N</th>
      <th>Generic Name</th>
      <th>Trade Name</th>
      <th>Company</th>
      <th>Buy Rate</th>
      <th>Sell Rate</th>
      <th>MRP</th>
      <th>Action</th>
    </tr>
  </thead>

  <tbody>
    <tr id="111">
      <td>1</td>
      <td>Aceclofenac 100mg&nbsp;Tablet</td>
      <td>Caclotin</td>
      <td>Reneta</td>
      <td>1.80</td>
      <td>3.80</td>
      <td>4.00</td>
      <td>
        <a class="btn edit result ebar" href=""></a>
      </td>
    </tr>

    <tr id="259">
      <td>2</td>
      <td>Albendazole 400mg&nbsp;Tablet</td>
      <td>Pernil DS</td>
      <td>Euro Pharma</td>
      <td>2.45</td>
      <td>5.00</td>
      <td>5.00</td>
      <td>
        <a class="btn edit result ebar" href=""></a>
      </td>
    </tr>

    <tr id="113">
      <td>3</td>
      <td>Allyestrenol&nbsp;Tablet</td>
      <td>Gestrenol</td>
      <td>Reneta</td>
      <td>5.00</td>
      <td>8.00</td>
      <td>8.00</td>
      <td>
        <a class="btn edit result ebar" href=""></a>
      </td>
    </tr>

    <tr id="33">
      <td>4</td>
      <td>Ambroxol Hydrochloride 100ml&nbsp;Syrup</td>
      <td>Myrox</td>
      <td>ACI</td>
      <td>23.85</td>
      <td>38.00</td>
      <td>40.12</td>
      <td>
        <a class="btn edit result ebar" href=""></a>
      </td>
    </tr>

    <tr id="305">
      <td>5</td>
      <td>Amoxycillin Trihydrate 500mg&nbsp;Capsule</td>
      <td>SK-Mox 500</td>
      <td>Eskayef</td>
      <td>3.45</td>
      <td>6.00</td>
      <td>6.00</td>
      <td>
        <a class="btn edit result ebar" href=""></a>
      </td>
    </tr>

  </tbody>
</table>

Answer 2

试试这个，只需设置

var newRowID = 3; 到你的新id而不是 3

＆＃13;

$(function() {
  var allIds = [];
  $("table tr[id]").each(function(i) {
    allIds.push(this.id);
  });

  allIds.sort();

  var newRowID = 3;
  var closest = allIds.reduce(function(prev, curr) {
    return (Math.abs(curr - newRowID) < Math.abs(prev - newRowID) ? curr : prev);
  });

  
  $("table tr[id='" + closest + "']").after("<tr><td><h2>no data</h2></td></tr>")



});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="price" class="print" crit="Medicine" scrit="2016">
  <thead>
    <tr>
      <th>S/N</th>
      <th>Generic Name</th>
      <th>Trade Name</th>
      <th>Company</th>
      <th>Buy Rate</th>
      <th>Sell Rate</th>
      <th>MRP</th>
      <th>Action</th>
    </tr>
  </thead>

  <tbody>
    <tr id="111">
      <td>1</td>
      <td>Aceclofenac 100mg&nbsp;Tablet</td>
      <td>Caclotin</td>
      <td>Reneta</td>
      <td>1.80</td>
      <td>3.80</td>
      <td>4.00</td>
      <td>
        <a class="btn edit result ebar" href=""></a>
      </td>
    </tr>

    <tr id="259">
      <td>2</td>
      <td>Albendazole 400mg&nbsp;Tablet</td>
      <td>Pernil DS</td>
      <td>Euro Pharma</td>
      <td>2.45</td>
      <td>5.00</td>
      <td>5.00</td>
      <td>
        <a class="btn edit result ebar" href=""></a>
      </td>
    </tr>

    <tr id="113">
      <td>3</td>
      <td>Allyestrenol&nbsp;Tablet</td>
      <td>Gestrenol</td>
      <td>Reneta</td>
      <td>5.00</td>
      <td>8.00</td>
      <td>8.00</td>
      <td>
        <a class="btn edit result ebar" href=""></a>
      </td>
    </tr>

    <tr id="33">
      <td>4</td>
      <td>Ambroxol Hydrochloride 100ml&nbsp;Syrup</td>
      <td>Myrox</td>
      <td>ACI</td>
      <td>23.85</td>
      <td>38.00</td>
      <td>40.12</td>
      <td>
        <a class="btn edit result ebar" href=""></a>
      </td>
    </tr>

    <tr id="305">
      <td>5</td>
      <td>Amoxycillin Trihydrate 500mg&nbsp;Capsule</td>
      <td>SK-Mox 500</td>
      <td>Eskayef</td>
      <td>3.45</td>
      <td>6.00</td>
      <td>6.00</td>
      <td>
        <a class="btn edit result ebar" href=""></a>
      </td>
    </tr>

  </tbody>
</table>

＆＃13;

Answer 3

解决方案你的问题是找到最接近id的号码。找到以下小提琴，了解如何在所需位置添加新行的过程。

Fiddle

用于查找最接近元素的id。

var closest = ids.reduce(function (prev, curr) {
  return (Math.abs(curr - goal) < Math.abs(prev - goal) ? curr : prev);
});

修改

正如所指出的那样，先前的解决方案存在局限性，我已经找到了另一种获得所需输出的逻辑。

我在做什么？

创建一个id数组并将新id添加到数组中，然后对id获取id的索引并基于添加新行的id进行排序。

这是工作小提琴。 Method 2

希望这能解决您的问题。

帮助

Answer 4

我测试了不同的jQuery代码，以找到一个小于检索到的id的tr id。你的所有反应都非常好，特别是@ DelightedD0D做了很多。但是我为此目的开发了一个代码，据我所知，在所有情况下都是简单有效的。

代码如下：

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="test_box" style="height: 900px; width: 200px; background-color: red;"></div>

如果您在此代码中发现任何错误，请在此处报告。

如何识别tr id小于预测的？

4 个答案: