如何用js代码在页面上实现tr排序

Posted 2023-04-10

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何用js代码在页面上实现tr排序相关的知识，希望对你有一定的参考价值。

我需要实现一个功能，新插入的数据在页面上展示的时候是按截止日期升序来排列的，如何循环比较每行的dueDate时间，将我新插入的dueDate那行数据排在刚好比它小一点和比它大一点的那一行之间。我写了一点代码，但是就是不知道如何比较处于中间状态的dueDate如何显示在页面，希望有人帮我解答。

//获取新插入的due date的值
var dueDateStr=document.getElementById("<%= dueDate.ClientID%>").value;

//获取页面上的table有几条记录(不算表头)
var tableObj=document.getElementById("<%=_reminderList.ClientID %>"); //获取table对象
var length=tableObj.rows.length;

for(int i=0;i<length;i++) //循环比较

if(dueDateStr < tableObj.row[i].cells[1].innerhtml)

//如果新插入的due date比数据库中所有的都小，则插到首行
$(rowObj).insertAfter($("#<%=_reminderList.ClientID%> tr").first()).html("content");

if( dueDateStr > tableObj.row[i].cells[1].innerHTML &&
dueDateStr < tableObj.row[i+1].cells[1].innerHTML )

//如果新插入的due date在数据库中循环，比其中某一行大，比另一行小，就插到这两行之间
//请问这儿该如何判断，我想到了冒泡排序，可是不知道如何下手

if( dueDateStr > tableObj.row[i].cells[1].innerHTML)

//如果新插入的due date比数据库中所有的都大，则插到尾行
$(rowObj).insertAfter($("#<%=_reminderList.ClientID%> tr").last()).html("content");

我看有jQuery的语法，就用jQuery类似的，输入的时间没有去校验，格式如2011-4-19 11:35:11
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery</title>
<script language="javascript" type="text/javascript" src="js/jquery-1.4.4.js" ></script>
<script type="text/javascript">
$(document).ready(function()

$("#b").click(function()
var dueDate = $("#dueDate").val();

$("#t tr").each(function(i)
if(!compareTime($("td:eq(1)",this).html(),dueDate) && i==0) //输入时间小于第一行时间则直接插入到第一行前
$("#t tr").eq(i).before("<tr><td>content</td><td>"+ dueDate +"</td></tr>");
return false;

else if($("#t tr").size()-1 > i) //比较第二行到最后前一行，如果是在期间的，插入行
if(compareTime($("td:eq(1)",this).html(),dueDate) && !compareTime($("#t tr").eq(i+1).find("td").eq(1).html(),dueDate))
$("#t tr").eq(i+1).before("<tr><td>content</td><td>"+ dueDate +"</td></tr>");
return false;

else
return true;

//输入时间大于所有行的，插入到最后
$("#t").append("<tr><td>content</td><td>"+ dueDate +"</td></tr>");
);
);
);

//时间比较函数
function compareTime(startDate, endDate)
var startDateTemp = startDate.split(" ");
var endDateTemp = endDate.split(" ");

var arrStartDate = startDateTemp[0].split("-");
var arrEndDate = endDateTemp[0].split("-");

var arrStartTime = startDateTemp[1].split(":");
var arrEndTime = endDateTemp[1].split(":");

var allStartDate = new Date(arrStartDate[0], arrStartDate[1], arrStartDate[2], arrStartTime[0], arrStartTime[1], arrStartTime[2]);
var allEndDate = new Date(arrEndDate[0], arrEndDate[1], arrEndDate[2], arrEndTime[0], arrEndTime[1], arrEndTime[2]);

if (allStartDate.getTime() >= allEndDate.getTime())
return false;
else
return true;

</script>
</head>

<body>
<input type="text" id="dueDate" value="" /><button type="button" id="b">insert</button>
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="t">
<tr>
<td>111</td>
<td>2011-04-19 11:20:00</td>
</tr>
<tr>
<td>aaa</td>
<td>2011-04-19 11:40:00</td>
</tr>
<tr>
<td>3xxx</td>
<td>2011-04-19 13:30:00</td>
</tr>
<tr>
<td>gfedd</td>
<td>2011-04-19 20:50:00</td>
</tr>
</table>

</body>
</html> 参考技术A 我觉得可以这样，取出你页面上所有要排序那一列的数值以及他们对应记录的ID,放到一个Map或者集合，然后把你当前这个值也放集合或者Map中，集体做一个冒泡排序，排出来之后的结果，你找出你要插入的值的位置，然后相应的位置放到表格中就行了。。。参考技术B 请问按什么排序？

如何用js实现简单的页面html动态加载（“看更多“/页面折叠功能）

关键：

使用document.createElement函数创建html元素
滤清各元素父子关系并使用appendChild（）函数将其联系

下面给出两个示例代码：

示例代码一
注意：该代码使用了BootStrap5

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
  <title>动态生成控件 CSDN@狱典司</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>


  <script>
    var i2 = 3;
    function flash2() {
      if (i2 <= 6) {
        var times;
        times = i2;
        var nums = times + 3;
        while (times < nums) {
          var up = document.getElementById("up");

          var div0 = document.createElement("div");
          div0.className = "container p-4 my-5 border"

          var div1 = document.createElement("div");
          div1.className = "row ";

          var div2 = document.createElement("div");
          div2.className = "col-sm-3 p-3 bg-white ";

          var img = document.createElement("img");
          img.src = "p1.png";
          img.alt = "Big Boat";
          img.class = "d-block";
          img.style = "width:100%";

          div1.appendChild(div2);
          div2.appendChild(img);

          var div3 = document.createElement("div");
          div3.className = "col-sm-9 p-3 bg-white ";

          var h = document.createElement("h5");
          h.innerHTML = "文章标题";

          var p = document.createElement("p");
          p.innerHTML = "文章描述";

          div3.appendChild(h);
          div3.appendChild(p);

          div1.appendChild(div3);
          div0.appendChild(div1);
          up.appendChild(div0);

          times++;
        }
        i2 = times;
      } else {
        alert("人家也是有底线的啦!");
      }
    }
  </script>
  </script>
</head>

<body>
<div id = "up">
  <div class="container p-4 my-5 border">
    <div class="row">
      <div class="col-sm-3 p-3 bg-white ">
        <img img src="p1.png" alt="Big Boat" class="d-block" style="width:100%">
      </div>
      <div class="col-sm-9 p-3 bg-white ">
        <h5>文章标题</h5>
        <p>内容描述</p>
      </div>
    </div>
  </div>
</div>

<div align="center">
  <button type="button"  class="btn btn-primary my-2"  onclick="flash2()">看更多</button>
</div>
</body>
</html>

示例代码二
该代码使用html和js即可实现

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
 <title>动态生成控件 CSDN@狱典司</title>
  <script>
    var info = new Array();
    info[0] = "";
    info[1] = "01. 《计算机网络·自顶向下方法》学习笔记1";
    info[2] = "02. 用图片带你串起进程和文件的知识";
    info[3] = "03. 详解Linux下静态库/动态库的生成和使用";
    info[4] = "04. Linux下详解gcc编译过程（含代码示例）&& gcc使用教程";
    info[5] = "05. 如何用C/C++写一个Linux文件系统模拟器";
    info[6] = "06. 保姆级swap分区详解！手把手带你创建swap分区";
    info[7] = "07. 如何用C/C++写一个自己的语言";
    info[8] = "08. 一文带你捋清 Linux根目录下常见文件目录";
    info[9] = "09. C++如何递归地算出一个文件夹的大小";
    info[10] = "10. 利用PDO.so连接并读取Mysql数据库 ";
    info[11] = "11. 超全！Mysql数据库 常用基本操作总结 ";
    info[12] = "12. 利用PDO.so连接并读取Mysql数据库 ";
    info[13] = "13. 操作系统实验 分区管理 ";
    info[14] = "14. 抓包分析Telnet远程登陆协议信令交互过程 ";
    info[15] = "15. 操作系统实验 生产者/消费者模型 ";
    var i=1;

    function flash() {
      if (i <= 15) {
        var times;
        times = i;
        var nums = times + 5;
        while (times < nums) {
          var top = document.getElementById("top");
          var div = document.createElement("div");
          var a = document.createElement("a");
          div.innerHTML="推荐(" + times + ") ";
          div.id = times;
          a.className="nav-link";
          a.href="#";
          a.id = "link"+times;
          a.innerHTML = info[times];
          div.appendChild(a);
          top.appendChild(div);
          times++;
        }
        i = times;
        document.getElementById("now").innerHTML = i;
      } else {
        alert("人家也是有底线的啦!");
      }
    }
  </script>
</head>

<body>
<div id="top"></div>
<div><input type="button" onclick="flash()" value="添加" /></div>
</body>
</html>

以上是关于如何用js代码在页面上实现tr排序的主要内容，如果未能解决你的问题，请参考以下文章

静态网页中如何用js实现搜索功能？

如何用JS实现返回顶部？

如何用js更改tr的背景颜色新手求助

Thinkphp后台如何用js跳转到指定页面怎么写

如何用js实现简单的页面html动态加载（“看更多“/页面折叠功能）

如何用js添加点击事件，点击后跳转到指定动态页面