帮助!!对于使用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
检查在顶部,底部或两行之间追加的位置答案 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