如何在HTML表格的特定位置插入？

时间：2018-09-21 09:13:41

标签： javascript jquery

我设计了一个带有标题的表。我将动态行<tr>附加到此表中。在追加时，我丢失了行的顺序。关于如何解决此问题的任何建议或想法？预先感谢。

<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);

所需的输出：

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

5 个答案:

答案 0 :(得分：1)

您将执行此操作。添加排序功能，然后按下面的链接所述调用该功能。

基于Jquery内容排序链接添加了摘要：-https://www.shift8web.ca/2017/01/use-jquery-sort-reorganize-content/ 

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 i;
var htmlcontent = $('#myTable').html();
 $('#myTableOriginalContent ').html( $('#myTable').html())
sortMeBy('id', 'myTable', 'tr', 'asc')
function sortMeBy(arg, sel, elem, order) {
        var $selector = $('#'+sel),
        $element = $selector.children(elem);           
        $element.sort(function(a, b) {
                var an = parseInt(a.getAttribute(arg)),
                bn = parseInt(b.getAttribute(arg));
                if (order == "asc") {
                        if (an > bn)
                        return 1;
                        if (an < bn)
                        return -1;
                } else if (order == "desc") {
                        if (an < bn)
                        return 1;
                        if (an > bn)
                        return -1;
                }
                return 0;
        });
        $element.detach().appendTo($selector);
}
<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Original Content
<table id="myTableOriginalContent">
    <thead>
        <tr><td></td></tr>
        <tr>
            <th><span>Name</span></th>
            <th><span>Description</span></th>
        </tr>
    </thead>   
</table>

Desired Result
<table id="myTable">
    <thead>
        <tr><td></td></tr>
        <tr>
            <th><span>Name</span></th>
            <th><span>Description</span></th>
        </tr>
    </thead>   
</table>

</body>
</html>

答案 1 :(得分：0)

将$('#myTable').append(html3);更改为$(html3).insertAfter('#1')。还要注意，在tbody之后需要一个thead元素来包含行，但是我想浏览器会自动为您插入一个。试试这个：

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 tbody').append(html1).append(html2);

$(html3).insertAfter('#1');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
  <thead>
    <tr>
      <td></td>
    </tr>
    <tr>
      <th>Name</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

答案 2 :(得分：0)

逻辑是您添加所有动态表行，然后根据id的属性对其重新排序。

排序代码源：Using jquery, how do you reorder rows in a table based on a TR attribute?

我刚刚对其做了一些修改。

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.

var html4 = '<tr id="5"><td>5th</td><td>5th</td></tr>'; // This should go to 5th position.

var html5 = '<tr id="4"><td>4th</td><td>4th</td></tr>'; // This should go to 4th position.

$('#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();
rows.sort(function(a, b) {
var keyA = $(a).attr('id');
var keyB = $(b).attr('id');
if (keyA > keyB) return 1;
if (keyA < keyB) return -1;
return 0;
});
$.each(rows, function(index, row) {
$table.children('tbody').append(row);
});
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

<table id="myTable">
    <thead>
        <tr><td></td></tr><tr>
            <th>Name</span></th>
            <th>Description</span>
            </th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

答案 3 :(得分：0)

简单，只是您打错电话就是这样

$('#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>

答案 4 :(得分：-1)

尝试关注

在表中添加<tbody>并追加行

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 tbody').append(html1);
$('#myTable tbody').append(html2);
$('#myTable tbody').append(html3);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
    <thead>
        <tr><td></td></tr><tr>
            <th>Name</span></th>
            <th>Description</span>
            </th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

相关问题
最新问题