Question

我有一个向我的表添加行的函数，但问题是它并不总是按顺序排列，有一个数字列来排序项目。

我需要根据N°栏重新排序我的表格HTML。

这是我的表：

+------+---------------+---------------+-----------+
| N°   |   COLUMN1     |    COLUMN2    |  COLUMN3  |
+------+---------------+---------------+-----------+
| 2    |  AAAAAAAAAAAA |  XXXXXXXXXXXX |  00000000 |
| 1    |  BBBBBBBBBBBB |  YYYYYYYYYYYY |  00000000 |
| 3    |  CCCCCCCCCCCC |  ZZZZZZZZZZZZ |  00000000 |
+------+---------------+---------------+-----------+

预期结果为：

+------+---------------+---------------+-----------+
| N°   |   COLUMN1     |    COLUMN2    |  COLUMN3  |
+------+---------------+---------------+-----------+
| 1    |  BBBBBBBBBBBB |  YYYYYYYYYYYY |  00000000 |
| 2    |  AAAAAAAAAAAA |  XXXXXXXXXXXX |  00000000 |
| 3    |  CCCCCCCCCCCC |  ZZZZZZZZZZZZ |  00000000 |
+------+---------------+---------------+-----------+

每列都有一个属性顺序，如下所示：

<tr data-order='2'>......</tr>
<tr data-order='1'>......</tr>
<tr data-order='3'>......</tr>

我尝试使用插入DataTable（它正在工作），但我想在没有额外插件的情况下对表进行排序。

提前感谢您的帮助！：）

编辑：解决问题的方法......

正如我所提到的，我有一个添加新tr的功能。

function addnewTR(newOrder, new_tr){
    //Code
}

首先，查看表中是否存在订单，如果存在则将tr设置为变量。

$('#myTable tbody tr').each(function (i) {

    var _tr;
    var order = $(this).data("order");

    if (order_actual == newOrder) {
       _tr = this;
    };

});

第二次，检查_tr的位置，使用insertAfter插入我的新元素（如果表中存在顺序）或append（如果订单是新的。）

if (_tr !== undefined) {
   $(new_tr).insertAfter(_tr);
} else {
   $("#myTable tbody").append(new_tr);
}

Answer 1

试试这个：

 $('tr').sort(function (a, b) {
  var contentA = parseInt($(a).data('order'));
  var contentB = parseInt($(b).data('order'));
  return (contentA < contentB) ? -1 : (contentA > contentB) ? 1 : 0;
 })

在添加新行

后运行它

并检查Array.prototype.sort

Answer 2

以下是一个纯粹的JavaScript解决方案。它确实保留了原始订单，因此您可以说它是稳定的排序。注意：

我假设你的数据顺序只包含整数
可以具有数据顺序的重复值
按ASC顺序排序

说明：

您需要从表格中获取<tr>列表
以下列形式{“data-order”：[HTMLElement：tr_1，HTMLElement：tr_2]
然后清空表格上的所有行
从步骤2中创建的对象获取密钥集
排序
打印它（注意，如果允许重复的数据顺序值，对象上的每个元素都可能有多个对象）

var table = document.getElementsByTagName("table")[0];
var new_tbody = document.createElement('tbody');
var tr_list = document.getElementsByTagName("table")[0].rows;
var tr_list_obj = {};
for(var tr_index in tr_list){
	var tr = tr_list[tr_index];
	if(tr instanceof HTMLElement){
  	if(tr_list_obj[tr.getAttribute("data-order")] instanceof Array){
    	tr_list_obj[tr.getAttribute("data-order")].push(tr);
    }else{
    	tr_list_obj[tr.getAttribute("data-order")] = new Array();
    	tr_list_obj[tr.getAttribute("data-order")].push(tr);
    }
  }
}


tr_list[0].parentNode.innerHTML = '';


tr_list_sort_array = Object.keys(tr_list_obj);
tr_list_sort_array.sort();

for(var tr_index in tr_list_sort_array){
	for(var tr_index_2 in tr_list_obj[tr_list_sort_array[tr_index]]){
  		table.appendChild(tr_list_obj[tr_list_sort_array[tr_index]][tr_index_2]);
  }
}

<table>
<tr data-order='2'><td>First 2</td></tr>
<tr data-order='1'><td>First 1</td></tr>
<tr data-order='3'><td>First 3</td></tr>
<tr data-order='5'><td>First 5</td></tr>
<tr data-order='4'><td>First 4</td></tr>
<tr data-order='9'><td>First 9</td></tr>
<tr data-order='4'><td>Second 4</td></tr>
<tr data-order='1'><td>Second 1</td></tr>
<tr data-order='3'><td>Second 3</td></tr>
</table>

Answer 3

你将无法进行排序。所以需要分离和附加。

1）获取父母和TR列表

2）排序TR

3）分离并追加TRs

var $table = $('table'),
$tr = $table.children('tr');

$tr.sort(function(a,b){
    var an = Number(a.data('order')),
       bn = Number(b.data('order'));

    if(an > bn) {
        return 1;
    }
    if(an < bn) {
        return -1;
    }
    return 0;
});

$tr.detach().appendTo($table);

Answer 4

您需要做的就是：

走在表格中的所有rows，如果索引行不匹配，请将data-order move it放在正确的位置。

订单表html asc

4 个答案: