在两行之间追加行答案

【问题标题】：Append row between two rows在两行之间追加行
【发布时间】：2015-02-01 00:40:02
【问题描述】：

救命！！对于使用 Jquery Ajax 的动态降序 tr 字段。我有这样的表结构

<tr data-date="2015-01-30">
  <td class="col-lg-2">2015-01-30</td>
  <td class="col-lg-4">asdf sdaf </td>
</tr>
<tr data-date="2015-01-14">
  <td class="col-lg-2">2015-01-14</td>
  <td class="col-lg-4">asdf sdaf </td>
</tr>

现在我想在这两行之间插入行，即使用名为 data-date 的 tr 属性，如果要插入的新行的日期属性大于第一个，则应该附加它在最顶部，如果它存在于两行之间，则应将其附加在最大行之后和具有较小日期属性的最小行之前

例如：我想插入

<tr data-date="2015-01-16">
      <td class="col-lg-2">2015-01-30</td>
      <td class="col-lg-4">asdf sdaf </td>
    </tr>

在这两行之间使用 jquery 通过使用 data-date 属性检查在顶部、底部或两行之间追加的位置

【问题讨论】：

date 不是有效的 html 属性。如果你想使用自定义属性，我建议使用data-*-attributes (data-date)。

标签： jquery

【解决方案1】：

您可以使用jQuery .attr() 方法来获取date 属性的值。然后您必须检查此值并在正确的位置插入您的<tr>，但您需要在任何<tr> 上有一个id

使用 id 属性 = date 属性。

使用此示例，对我有用：（复制和粘贴，另存为 .html）

<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    var date_list = []; //create an array will contains all <tr> dates
    $("tr").each(function() {
        tr_date = $(this).attr("date"); //get data value of <tr>
        date_list.push(tr_date); //put date in array
    });
    var your_date = "2015-1-4";

    var big_to_small = false;  //Flag value set false = your <tr> are from small to big
    $("table").after(big_to_small);
    //Check the case if your <tr> are from big to small
    if (date_list[0] > date_list[date_list.length-1]){
        big_to_small=true;    //Set Flag value to true = your <tr> are from big to small
    }

    //Case 1: <tr> from big to small
    if (big_to_small){
        date_list = date_list.sort(); //Sort array
        date_list = date_list.reverse(); //Reverse array from big to small
        $.each(date_list, function(index ,value){
            //Insert <tr> up on top (of biggest date) or middle
            if (your_date > value){
                $("#"+value).before("<tr id='"+your_date+"' date='"+your_date+"'> <td>"+your_date+"</td><td>asdf sdaf </td></tr> ");
                return false;
            }
            //Insert <tr> down the smallest date
            if (your_date < date_list[date_list.length-1]){
                $("#"+date_list[date_list.length-1]).after("<tr id='"+your_date+"' date='"+your_date+"'> <td>"+your_date+"</td><td>asdf sdaf </td></tr>");
                return false;
            }
        });
    }

    //Case 2: <tr> from small to big
    else{
    date_list = date_list.sort(); //Sort array
    $.each(date_list, function(index ,value){
            //Insert <tr> up on top (of smallest date) or middle
            if (your_date < value){
                $("#"+value).before("<tr id='"+your_date+"' date='"+your_date+"'> <td>"+your_date+"</td><td>asdf sdaf </td></tr> ");
                return false;
            }
            //Insert <tr> down the bigger date
            if (your_date > date_list[date_list.length-1]){
                $("#"+date_list[date_list.length-1]).after("<tr id='"+your_date+"' date='"+your_date+"'> <td>"+your_date+"</td><td>asdf sdaf </td></tr>");
                return false;
            }
        });
        }
});
</script>

</head>
<body>
<table>
    <tr id="2015-1-1" date="2015-1-1">
      <td class="col-lg-2">2015-1-1</td>
      <td class="col-lg-4">asdf sdaf </td>
    </tr>
    <tr id="2015-1-3" date="2015-1-3">
      <td class="col-lg-2">2015-1-3</td>
      <td class="col-lg-4">asdf sdaf </td>
    </tr>
    <tr id="2015-1-5" date="2015-1-5">
      <td class="col-lg-2">2015-1-5</td>
      <td class="col-lg-4">asdf sdaf </td>
    </tr>
</table>
</body>
</html>

测试自己的输出！ :D

也尝试将表中的 <tr> 顺序从 2015-1-5 ... 更改为 2015-1-1。

此代码仅适用于已订购的<tr>（任何订单）。

尝试更改 var your_date 中的值以查看差异！

【讨论】：

上次更新适用于日期值，例如 2015-01-31（最大）、2015-01-16（中间）、2015-01-13（最小）。
这很好用，但是如果数组包含 2015-1-1、2015-1-4 和 2015-1-5 并且 i尝试插入 2015-1-6 然后在 2015-1-1 和 2015-1-5 之间插入而不是 5
我从您的<tr> 的日期开始从大到小排序。代码适用于这种情况。在这两种情况下，我都使用似乎可行的解决方案编辑了代码。
请注意，此代码仅适用于已订购的<tr>（任何订单）。如果您有未排序的<tr>，也许您可以搜索“如何为 jQuery 表格元素排序”。
不客气！如果没有其他答案，您可以接受这是最好的。我真的需要一些声望点。我是社区的新人：P

【解决方案2】：

你可以使用 .after() ：

var string = "<tr date="2015-01-14">
 <td class="col-lg-2">2015-01-14</td>
 <td class="col-lg-4">asdf sdaf</td>
</tr>";

$(tr[date='2015-01-30']).after(string);

【讨论】：

但是如何检查它是否更大或在文档中的行之间
如果你的意思是一种日期排序，你最好先做，比如'$('tr').each(function(){ datecomparison here });' ，这是你的问题？

【解决方案3】：

所以您想评估新的 tr 是否早于您已经存在的 trs，如果没有则添加？当然:)

var example="2015-01-20";
$('tr[data]').each(function(){
    if(example>=$(this).attr("data")){
    $(this).before("<tr data='"+example+"'><to class='col-lg-2'>"+example+"</td></tr>");
    }
});
if($("tr[data='"+example+"']").length==0) $("tr:last-child[data]","table#yourTableName").after("<tr data='"+example+"'><td class='col-lg-2'>"+example+"</td></tr>");

对不起，如果它是奇怪的或什么的。使用我的手机：d

【讨论】：