Question

想知道您可以设置tr标记的属性，以确定它将在网页上呈现的顺序。

我有基于数组动态创建表的代码，在这个数组中还有一段数据说明每行的顺序，但数据是任意的。

举个例子：

<table>
    <tr row="0">A</tr>
    <tr row="2">C</tr>
    <tr row="1">B</tr>
<table>

表格将在dom结构中以这种方式构造，但在渲染时我希望它显示如下：

<table>
    <tr row="0">A</tr>
    <tr row="1">B</tr>
    <tr row="2">C</tr>
<table>

如果此row属性或类似内容不存在，我可以使用JavaScript吗？

Answer 1

我有基于数组动态创建表的代码

在构建表之前，您应该按照所需的顺序sort the array。

例如，要按名为“index”的属性进行排序：

myArray.sort(function(a, b) {
  return +(a.index > b.index);
})

如果您的源数据很复杂，您可以定义一个单独的函数，该函数返回最终应该用于对表进行排序的属性：

function getSortKey(element) {
  // write the logic to return your "row" attribute. It can be
  //  as complex as necessary (but it must be synchronous).
  // a made-up example:
  return element.members ? 
    ? element.members[0].name
    : element.defaultName  ;
}

myArray.sort(function(a, b) {
  return +(getSortKey(a) > getSortKey(b));
})

没有内置方法可以更改行渲染的顺序，并且在渲染后使用JavaScript更改顺序效率很低。

Answer 2

这是你应该在将表解析为DOM之前从更高层解决的问题，但是这些行中的某些东西可以工作（fyi没有时间立即调试它）

var table_tr = [];
jQuery("#mytable").find("tr").each(function(){
 table_tr[parseInt(jQuery(this).attr("row"))] = jQuery(this).clone(true,true);
 jQuery(this).remove();
});
jQuery.each(table_tr,function(index,element){
 jQuery("#mytable").append(element);
});

编辑：有点难看，但它有效： https://jsfiddle.net/ezbd9huv/ 说真的，你应该考虑在打印到DOM之前修复它〜

设置tr标签的行顺序

2 个答案: