2

我有一个 html 表，我根据我为每个表行拥有的自定义属性值的 CSV 列表重新排序。我正在使用以下功能来做到这一点：

for (var i = 0; i < arrCSV.length; i++)
{
  $('#' + tableId)
      .find('[fname = ' + arrCSV[i] + ']')
      .eq(0)
      .parents('tr')
      .eq(0)
      .appendTo('#' + tableId);
}

表结构为：

<table>
<tr>
 <td fname='f1'>something here</td>
</tr>
<tr>
 <td fname='f2'>something here</td>
</tr>
</table>

CSV 可能是这样的“f2，f1”

我发现这是一个非常非常慢的执行功能。非常感谢任何优化它的帮助。

编辑：根据http://www.learningjquery.com/2009/03/43439-reasons-to-use-append-correctly上的文章，可以通过连接 html 仅调用一次 append 来实现最大的性能提升细绳。有人可以帮助使用这种技术解决我的问题吗？我不确定如何在 for 循环中获取 s HTML 并将其附加一次。

4

4 回答 4

1

我建议尽可能少地找到元素。使用感兴趣的属性值作为键将所有匹配的行存储到“散列”中。浏览您的 CSV，从散列中选择相应的行，将其推送到数组中，最后使用之前找到的 jQuery 对象将数组的元素附加到表中。

var table = $('#' + tableId);
var rowHash = {};
table.find('[fname]').each( function() {
    rowHash[$(this).attr('fname')] = $(this).closest('tr');
});
var rows = [];
for (var i = 0; i < arrCSV.length; ++i)
{
    var row = rowHash[arrCSV[i]];
    if (row) {
       rows.push(row);
    }
}
$(rows).appendTo(table);

编辑：这似乎是对我之前的代码的轻微改进，我将每一行附加到表中，因为它被发现了。我在一个有 1000 行的表上进行了测试，似乎需要大约 1 秒才能对需要完全反转的表进行排序。

于 2009-07-01T15:20:38.637 回答
1

如果您只想附加 html 一次（例如 learningjquery.com 文章），请尝试以下操作：

$(document).ready(
function()
{
   var arrCSV = ['f2', 'f1'];
   var tableId = 'mainTable';
   var newTable = [];
   for (var i = 0; i < arrCSV.length; i++)
   {
      var row = $('#' + tableId)
                .find('[fname = ' + arrCSV[i] + ']')
                .eq(0)
                .parents('tr')
                .eq(0);

      newTable.push(row.html());
   }                    

   $('#' + tableId).html(newTable.join(''));
};
});

直播版： http: //jsbin.com/uwipo 代码：http: //jsbin.com/uwipo/edit

虽然我个人认为您应该首先分析您的代码，看看它是否是慢速的追加或“查找”方法调用。我在想，对于一个巨大的表，使用“查找方法”来查找自定义属性可能会很慢。但同样，任何猜测都没有意义，分析代码并找出它。

如果 'find' 方法很慢，是否可以在 td 上使用 id 属性而不是提供自定义属性。

例如

<table>
<tr>
   <td id='f1'>something here</td>
</tr>
<tr>
   <td id='f2'>something here</td>
</tr>
</table>

然后，您查找父行的代码可能很简单：

  ('#' + arrCsv[i]).parent('tr')

编辑：正如 tvanfosson 所指出的，此代码假定 arrCSV 包含所有行的属性。最终表将仅包含 arrCSV 中存在的那些行。此外，此代码不会从原始表中复制“thead”、“tfoot”部分，尽管编写这样的代码应该很容易。

于 2009-07-01T16:27:12.367 回答
0

您可能需要重新考虑您的算法。

在不改变算法的情况下，轻微的优化将是：

var $table = $("#" + tableId);

for (var i = 0; i < arrCSV.length; i++)
{
  $('[fname = ' + arrCSV[i] + ']:first',$table).closest('tr').appendTo($table);
}
于 2009-07-01T15:00:22.703 回答
0

等一等...

$('#' + tableId)

获取#myTable

.find('[fname = ' + arrCSV[i] + ']')

查找 fname 属性等于 i 的任何内容

.eq(0)

给我上一个表达式的第一项

.parents('tr')

查找类型 TR 的父母

.eq(0)

给我上一个表达式中的第一个

.appendTo('#' + tableId);

将该 TR 添加到 #myTable

好的。现在我已经把它分解了——你只是在复制一个表格行吗？如果是这样， .append() 不是你的问题，你选择的选择器是。为了进一步加剧我的困惑，具有 fname 属性的唯一标签是您的 TR，那么您为什么要去他们的 parents() 并寻找第一个 TR？您基本上要求将 TR 标签放置在 TR 标签内 - 但这不是您的标记示例显示的内容。

于 2009-07-01T15:02:11.450 回答