在两行之间追加行

时间:2015-01-30 13:24:25

标签: jquery

帮助!!对于使用Jquery Ajax的动态降序tr feild。我有这样的表结构

<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属性,如果要插入的新行的日期属性大于第一行的那么它应该附加在最顶层,如果它存在于两行之间,则应该在最大行之后和最小行之前附加一个较小的日期attrib

例如:我想插入

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

检查在顶部,底部或两行之间追加的位置

3 个答案:

答案 0 :(得分:1)

您可以使用jQuery .attr()方法获取date属性的值。 然后,您必须检查此值并在正确的位置插入<tr>,但您需要id <{1}}

使用<tr> attribute = id属性。

使用此考试,对我有用:(复制并粘贴,另存为.html)

date

测试自己的输出! :d

另请尝试将表格中的<!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> 从2015-1-5更改为2015-1-1。

此代码仅适用于有序<tr>(任何订单)。

尝试更改var <tr>中的值以查看差异!

答案 1 :(得分:0)

您可以使用.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);

答案 2 :(得分:0)

所以你想评估新的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