Javascript 如何根据HTML表格行的值将其移动到另一个表格？
我正在使用thymeleaf，我想使用Javascript或Jquery根据表的值移动表行。 如果中的值为“坏”，则从当前表中删除该行，并将该行移到坏表中。表中没有类，因为Javascript 如何根据HTML表格行的值将其移动到另一个表格？,javascript,jquery,thymeleaf,Javascript,Jquery,Thymeleaf,我正在使用thymeleaf，我想使用Javascript或Jquery根据表的值移动表行。 如果中的值为“坏”，则从当前表中删除该行，并将该行移到坏表中。表中没有类，因为是使用thymeleaf foreach:iterate动态插入的 有可能在加载时执行所有这些操作吗 我试图复制和删除第一列值为“BAD”的所有行，然后插入到另一个表中，但在编写查找第一个值的脚本时遇到问题 Html <!DOCTYPE html> <html xmlns:th="http://www.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<!--<meta http-equiv="refresh" content="1" />-->
<link href="../static/css/style.css"
th:href="@{css/style.css}" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h3 style="color:yellow;">
BAD/WARNING
</h3>
<h3>
APPLICATION PROCESSING MONITORING
</h3>
<table id="tablePmBad">
<tr>
<th> Status </th>
<th> HostName </th>
<th> Process Name </th>
<th> Process Count </th>
</tr>
<tr>
<td> BAD </td>
<td> Host1 </td>
<td> process1</td>
<td> 0 </td>
</tr>
</table>
<h3 style="color:green;">
GREEN/NORMAL
</h3>
<h3>
APPLICATION SERVER
</h3>
<table id="tablePmGreen">
<tr>
<th> Status </th>
<th> Host </th>
<th> Cpu Memory </th>
<th> App Memory </th>
<th> Opt Memory </th>
</tr>
<tr th:each="datamem", iterStat : ${datalist}">
<td th: "${datamem.status}"></td>
<td th: "${datamem.host}"></td>
<td th: "${datamem.cpuMem}"></td>
<td th: "${datamem.appMem}"></td>
<td th: "${datamem.optMem}"></td>
</tr>
</table>
<h3>
MONITORING
</h3>
<table id="tableMGreen">
<tr>
<th> Status </th>
<th> HostName </th>
<th> Process Name </th>
<th> Process Count </th>
</tr>
<tr th:each="data, iterStat : ${countlist}">
<td th: "${data.Status}"> </td>
<td th: "${data.host}"> </td>
<td th: "${data.pName}"></td>
<td th: "${data.pcount}"></td>
</tr>
</table>
<script src="../static/css/color.js" type="text/javascript" th:src="@{css/color.js}"></script>
</div>
</div>
</body>
</html>
坏/警告
应用程序处理监控
地位
主机名
进程名称
进程计数
坏的
旅社1
过程1
0
绿色/正常
应用服务器
地位
主办
中央处理器存储器
应用程序内存
选择存储器
像您这样使用静态表不是一个好的实践
我想提出几个选择。我个人的选择是使用angularjs并使用ngRepeat指令迭代数据数组并生成HTML表。以下是您的出发点：
另一种选择是，如果您被限制使用jquery，则可以首先对数据进行排序
这里有一个很好的例子：
然后在javascript中迭代它，并根据BAD标志添加行，如下所示：
$("#table").append("<tr><td>"+blah+"</td></tr>");
$（“#表”）.append（“+blah+”）；
首先，您的HTML部分格式不正确。
您不能（不应该）在多个地方重复使用ID。然后使用类
将这些添加到
：
最后，在
之前：
$（文档）.ready（函数（）{
$（'table'）.DataTable({
“订单”：[[0，“asc”]]
});
});
现在，$（'table'）。DataTable
将告诉所有
正确格式化并在第一列升序排序
有关如何使用DataTables的详细信息：
更新
我的糟糕，忘记添加{}拥抱选项。
这里是完整的Plunker测试：这个问题非常模糊。一些示例代码将是一个很好的补充。如何生成这些表？您的数据在后面是如何形成的？按坏/好标志对数据进行排序有意义吗？我想对数据进行好/坏排序，但我不知道如何使用javascript或jquery进行排序。您最初是如何获得所有服务器信息的？为什么不从服务器端而不是客户端对这些服务器进行排序？@Adjit我正在从配置文件接收这些服务器，然后连接到ssh以检索数据，以确定状态是坏的还是正常的。它不断变化，所以我无法在服务器端完成它。对于循环中的每个数据，我将为其创建一个新行。@Jackie，如果您发现答案是这样的话，您可以将答案标记为已接受。我还没有找到适合我需要的答案。我正在尝试实现该功能，但遇到了问题。我将您的脚本添加到我的代码中，即head标记之间的script src链接。和脚本$（文档）在。但什么也没发生。我应该将表ID更改为类吗？如何自动更改？比如window.onload。或者不，当页面加载完毕后，“
中的代码将执行此操作。如果您访问Plunker链接并启动edior，您将看到行是“随机”的，然后进行排序。我将您的代码添加到我的程序中，它似乎与您的示例不一样。我使用thymeleaf作为前端。
<link href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery-1.12.3.js" type="text/javascript"></script>
<script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('table').DataTable({
"order": [[0, "asc"]]
});
});
</script>