1

我有从 Sharepoint 生成的下表：

<table class="ms-listviewtable">
   <tr>
      <th></th>
   </tr>
   <tr>
      <td></td>
   </tr>
</table>

我如何使用 Jquery 来加载文档以更改此表的布局，使其看起来像

  <table class="ms-listviewtable">
  <thead>
   <tr>
      <th></th>
   </tr>
  </thead>
  <tbody>
   <tr>
      <td></td>
   </tr>
 </tbody>
</table>
4

5 回答 5

4

如果您碰巧省略了标签，似乎所有现代浏览器都会自动将表格的内容包装在 a 中<tbody>，因此您必须执行以下操作：

$('table').each(function() {
    var $this = $(this);

    $this.children('tbody').children().unwrap();
    $this.children('tr:has(th)').wrapAll('<thead>');
    $this.children('tr:has(td)').wrapAll('<tbody>');
});

如果需要，请使用旧版浏览器对其进行测试。似乎它会工作。

于 2013-05-29T02:52:53.643 回答
3 
var $t = $("table.ms-listviewtable");
if ($t.has("tbody")) $t.find("tbody").children().unwrap();
$t.find("tr:first").wrap("<thead />");
$t.find("tr").not(":first").wrapAll("<tbody />");

http://jsfiddle.net/ghodmode/p4pvT/

更新：Blender +1 指出我的错误。我的原始版本实际上确实创建了一组额外的tbody标签。jsFiddle 也已更新。

于 2013-05-29T03:27:14.823 回答
1

步骤 1：临时存储标题行

首先，在我们重新排列表格的内部布局之前，您需要将表头和正文行与 DOM 隔离开来。

我们将使用 jQuery 的上下文选择器来执行此操作，您可能以前见过。它通过在您指定的上下文中选择元素来工作：如果该上下文是一个 DOM 节点 - 在这种情况下为表 - 它会选择该 DOM 节点中的元素。

注意：我在 JavaScript 变量名中使用 $ 前缀来表示我用来存储 jQuery 对象的变量——这是本练习中的所有变量。这是您不必自己使用的个人约定。

var $table = $('#your-table-id');

// This gets the first <tr> within the table, and remembers it here.
var $headRow = $('tr', $table).first();
$headRow.remove();

第 2 步：如有必要，创建 tbody

在这一点上，我们的工作要么更容易，要么更难。一些浏览器，如 Firefox，已经将表解释为具有一个隐式<tbody>元素，其中所有其他行都已存储 - 如果是这种情况，我们的工作已经完成！否则，我们还有更多工作要做，需要创建它<tbody>来存储当前行（所有这些都不是标题行）。

if (!$table.has('tbody')) {
    var $otherRows = $('tr', $table);
    $otherRows.remove();

    var $tbody = $('<tbody>');
    $table.append($tbody);
    $tbody.append($otherRows);
}

第 3 步：创建主题

现在我们将在表格的开头插入 thead 元素，并将表格的标题行添加到其中。

var $thead = $('<thead>');
$table.prepend($thead);
$thead.append($headRow);

现在一切都很好。

正在运行的代码，减去我的评论

一：JSFiddle演示

现在代码没有我的谈论打破它：

var $table = $('#your-table-id');

// This gets the first <tr> within the table, and remembers it here.
var $headRow = $('tr', $table).first();
$headRow.remove();

if (!$table.has('tbody')) {
    var $otherRows = $('tr', $table);
    $otherRows.remove();

    var $tbody = $('<tbody>');
    $table.append($tbody);
    $tbody.append($otherRows);
}

var $thead = $('<thead>');
$table.prepend($thead);
$thead.append($headRow);

一个迭代的替代方案

这将使用文档中的ms-listviewtable类覆盖每个表，而不是按 ID 精确定位一个表。

$('table.ms-listviewtable').each(function() {

    var $table = $(this);

    // The rest of the code as above goes within the function here,
    // except, of course, for the line that sets the $table variable.

});
于 2013-05-29T03:05:00.473 回答
1

工作 jsFiddle 演示

我用过这个算法，它适用于多个表，多行用于thead和tbody。

$(function () {
    // loop through all tables with specific class
    $('.ms-listviewtable').each(function () {
        var $table = $(this);

        // find all thead rows and save the index
        var thead = [];
        $table.find('tr > th').each(function () {
            var index = $(this).closest('tr').index();
            if ($.inArray(index, thead) == -1) {
                thead.push(index);
            }
        });

        // find all tbody rows and save the index
        var tbody = [];
        $table.find('tr > td').each(function () {
            var index = $(this).closest('tr').index();
            if ($.inArray(index, tbody) == -1) {
                tbody.push(index);
            }
        });

        // make tbody and thead tags
        var $tbody = $('<tbody></tbody>');
        var $thead = $('<thead></thead>');

        // insert thead rows from table to new thead element
        $.each(thead, function (i, v) {
            $table.find('tr').eq(v).clone(true).appendTo($thead);
        });     

        // insert tbody rows from table to new tbody element
        $.each(tbody, function (i, v) {
            $table.find('tr').eq(v).clone(true).appendTo($tbody);
        });

        // make table fresh
        $table.html('');
        $thead.appendTo($table);
        $tbody.appendTo($table);
    });
});
于 2013-05-29T03:10:10.243 回答
0

大家好，感谢大家对这个问题的贡献。我已经设法让它工作并将 tablesorter 方法扔到桌子周围。

如果您需要在生成的表没有 THEAD 或 TBODY 标签的情况下使 tablesorter 工作，这是一个解决方案：

$(document).ready(function() {

    var $table = $('#ctl00_m_g_fb789c4e_7fc7_47b5_9be4_dfa65d4650e0_ctl00_resultsGrid');

    // This gets the first <tr> within the table, and remembers it here.
    var $headRow = $('tr', $table).first();
    $headRow.remove();

    if (!$table.has('tbody')) {
        var $otherRows = $('tr', $table);
        $otherRows.remove();

        var $tbody = $('<tbody>');
        $table.append($tbody);
        $tbody.append($otherRows);
    }

    var $thead = $('<thead>');
    $table.prepend($thead);
    $thead.append($headRow);

    $("#ctl00_m_g_fb789c4e_7fc7_47b5_9be4_dfa65d4650e0_ctl00_resultsGrid").tablesorter();
});
于 2013-05-29T04:50:37.760 回答