设置tr标记的行顺序

Setting the row order of tr tags

本文关键字：顺序 tr 设置      更新时间：2023-09-26

想知道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做吗？

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

在构建表之前，应该按照所需的顺序对数组进行排序。

例如，要按名为"索引"的属性进行排序：

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更改顺序效率很低。

在将表解析到DOM之前，您可能应该从更高的级别修复这一问题，但沿着这些路线进行的操作可能会奏效（请注意，现在没有时间调试它）

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~

之前，您应该考虑修复它
相关文章：