Javascript 如何插入<；tr>'；在html表格中的某个位置有什么？
我设计了一个带有标题的表。我正在将动态行Javascript 如何插入<；tr>'；在html表格中的某个位置有什么？,javascript,jquery,Javascript,Jquery,我设计了一个带有标题的表。我正在将动态行追加到此表。在追加时，我丢失了行的顺序。关于如何解决这个问题，有什么建议或想法吗？提前谢谢 <table id="myTable"> <thead> <tr><td></td></tr><tr> <th>Name</span></th> <th>Descr
<table id="myTable">
<thead>
<tr><td></td></tr><tr>
<th>Name</span></th>
<th>Description</span>
</th>
</tr>
</thead>
-- dynamic rows will come.
</table>
var html1 = '<tr id="1"><td>aaa</td><td>aaa</td></tr>'; // This position is fine
var html2 = '<tr id="3"><td>bbb</td><td>bbb</td></tr>'; // This one is having id '3', it should go to 3rd position. when 2nd comes.
var html3 = '<tr id="2"><td>ccc</td><td>ccc</td></tr>'; // This should go to 2nd position.
$('#myTable').append(html1);
$('#myTable').append(html2);
$('#myTable').append(html3);
名称
描述
--动态行将出现。
var html1='aaaaaa'；//这个职位很好
var html2='bbbbbb'；//这一个id为“3”，它应该转到第三个位置。当第二个来的时候。
var html3='cccc'；//这应该是第二个位置。
$（'#myTable'）。追加（html1）；
$（'#myTable'）。追加（html2）；
$（'#myTable'）。追加（html3）；
<table id="myTable">
<thead>
<tr><td></td></tr><tr>
<th>Name</span></th>
<th>Description</span>
</th>
</tr>
</thead>
<tr id="1">
<td>aaa</td>
<td>aaa</td>
</tr>
<tr id="2">
<td>ccc</td>
<td>ccc</td>
</tr>
<tr id="3">
<td>bbb</td>
<td>bbb</td>
</tr>
</table>
名称
描述
aaa
aaa
ccc
ccc
bbb
bbb
var html1='aaaaaa'；//这个职位很好
var html2='bbbbbb'；//这一个id为“3”，它应该转到第三个位置。当第二个来的时候。
var html3='cccc'；//这应该是第二个位置。
$（'#myTable tbody'）.append（html1）；
$（'#myTable tbody'）.append（html2）；
$（'#myTable tbody'）.append（html3）
名称
描述
更改$（“#myTable”）.append（html3）到$（html3）。插入（'#1'）
。还要注意的是，在thead
后面需要一个tbody
元素来包含行，但我可以想象浏览器会自动为您插入一行。试试这个：
var html1='aaaaaa'；
var html2='bbbbbbbb'；
var html3=‘CCCC’；
$（'#myTable tbody'）.append（html1.append（html2）；
$（html3）.insertAfter（'1'）
名称
描述
逻辑是附加所有动态表行，然后根据id的属性对它们重新排序
排序代码源：
我只是稍微修改了一下
var html1='aaaaaa'；//这个职位很好
var html2='bbbbbb'；//这一个id为“3”，它应该转到第三个位置。当第二个来的时候。
var html3='cccc'；//这应该是第二个位置。
var html4='5th5th'；//这应该是第5位。
var html5='4th4th'；//这应该排到第四位。
$（'#myTable tbody'）.append（html1）；
$（'#myTable tbody'）.append（html2）；
$（'#myTable tbody'）.append（html3）；
$（'#myTable tbody'）.append（html4）；
$（'#myTable tbody'）.append（html5）；
var$table=$（“#myTable”）；
var rows=$table.find（'tr'）.get（）；
行排序（函数（a，b）{
var keyA=$（a）.attr（'id'）；
var keyB=$（b）.attr（'id'）；
如果（keyA>keyB）返回1；
if（keyA
名称
描述
您可以这样做。添加一个排序函数，然后调用该函数，如下链接所述
添加了基于Jquery内容排序链接的代码段：-
var html1='aaaaaa'；//这个职位很好
var html2='bbbbbb'；//这一个id为“3”，它应该转到第三个位置。当第二个来的时候。
var html3='cccc'；//这应该是第二个位置。
$（'#myTable'）。追加（html1）；
$（'#myTable'）。追加（html2）；
$（'#myTable'）。追加（html3）；
var i；
var htmlcontent=$（'#myTable'）.html（）；
$（'myTableOriginalContent'）.html（$（'myTable'）.html（））
排序表（'id'，'myTable'，'tr'，'asc'）
功能排序方式（arg、sel、elem、order）{
变量$selector=$（'#'+sel），
$element=$selector.children（elem）；
$element.sort（函数（a，b）{
var an=parseInt（a.getAttribute（arg）），
bn=parseInt（b.getAttribute（arg））；
如果（订单==“asc”）{
如果（an>bn）
返回1；
如果（anbn）
返回-1；
}
返回0；
});
$element.detach（）.appendTo（$selector）；
}
原始内容
名称
描述
期望结果
名称
描述
很简单，就是你打错电话了，这么说吧
$('#myTable').append(html1);
$('#myTable').append(html3);
$('#myTable').append(html2);
完整代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<table id="myTable">
<thead>
<tr>
<th>Name</span></th>
<th>Description</span>
</th>
</tr>
</thead>
</table>
</body>
</html>
<script type="text/javascript">
$( document ).ready(function() {
var html1 = '<tr id="1"><td>aaa</td><td>aaa</td></tr>';
var html2 = '<tr id="3"><td>bbb</td><td>bbb</td></tr>';
var html3 = '<tr id="2"><td>ccc</td><td>ccc</td></tr>';
$('#myTable thead').after(html1,html3,html2);
});
</script>
名称
描述
$（文档）.ready（函数（）{
变量html1=‘AAAAA’；
var html2='bbbbbbbb'；
var html3=‘CCCC’；
$（'#myTable thead'）。在（html1、html3、html2）之后；
});
为此，应循环计数，然后根据值或优先级生成html simple。您不会像您所做的那样生成和附加html，而是为此添加逻辑。如何生成html1、html2、html3，请在question@Craicerjack是的，很抱歉，我更新了所需的输出。您错过了问题的重要部分；ccc
行应该是第二行，但他希望bbb
位于第二行。他在他的var
sNo中犯了一个错误，一点也没有。再次查看问题中的注释和输出。