Question

我有以下从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>

Answer 1

如果您碰巧省略了标记，似乎所有现代浏览器都会自动将表格内容包装在<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>');
});

如果需要，可以使用旧版浏览器进行测试。好像它有用了。

Answer 2

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/

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

Answer 3

步骤1：暂时存储标题行

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

我们将使用您之前可能已经看过的jQuery contextual selector来完成此操作。它的工作原理是在您指定的上下文中选择元素：如果该上下文是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

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

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

现在一切都很好。

行动中的代码，减去我的评论

首先：JSFiddle demo

现在代码没有我的谈话分手了：

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.

});

Answer 4

Working jsFiddle Demo

我已使用此算法，它适用于多个表格，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);
    });
});

Answer 5

大家好，感谢大家对这个问题的贡献。我设法让它工作，并在表格周围抛出tablesorter方法。

如果您需要使tablesorter工作而没有生成的表具有THEAD或TBODY标记，那么这是一个解决方案：

$(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();
});

在这张桌子上包括THEAD和TBODY

5 个答案:

步骤1：暂时存储标题行

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

第3步：创建thead

行动中的代码，减去我的评论

迭代替代