使用jQuery / JavaScript操作HTML表(用于列重新排序,可见性)？

<table id="mainTable">
      <thead>
      <tr>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
      </tr>
      </thead>
      <tbody>
      <tr>
          <td>data</td>
          <td>data</td>
          <td>data</td>
      </tr>
      <tr>
          <td>data</td>
          <td>
               <table class="nestedTable">
                   <tr><th>Col 1</th><th>Col 3</th></tr>
                   <tr>
                       <td>nested data</td><td>nested data 1</td>
                    </tr>
               </table>
          </td>
          <td>data</td>
      </tr>
    </tbody>
</table>

<select id="cols" class="multiselect" multiple="multiple" name="cols[]">
    <option value="Col1">Col1</option>
    <option value="Col2">Col2</option>
    <option value="Col3">Col3</option>
</select>

[根据更新的问题删除原始答案]

给定一个像这样的数组(arr)：

['Col 2','Col 3','Col 1']

… 或这个：

['Col 1','Col 3']

…这将命令主表的列匹配,它将隐藏未使用的列：

var tr= $('#mainTable > tbody > tr,#mainTable > thead > tr');

$('> th,> td',tr).hide();

$.each(arr,function(_,val) {
  var col=  $('> th',tr)
              .filter(function() {
                return $(this).text()===val;
              })
              .index();

  $(tr).append(function() {
    return $('> td,> th',this).eq(col).show();
  });
});

Fiddle

单击按钮可重新排序表.

这个怎么运作

这会将后续选择器限制为主表的行：

var tr= $('#mainTable > tbody > tr,#mainTable > thead > tr');

即使您排除tbody,it will be added for you.因此,这始终是一个空集合：$(‘#mainTable> tr’).

这只隐藏了tr集合的直接子节点(来自上一行)：

$('> th,tr).hide();

作为副作用,所有后代也将被隐藏.

它相当于：

$(tr).children('th,td').hide();

当你可以使用CSS选择器完成相同的事情时,jQuery的子节点和查找方法通常是不必要的(并且代价高昂) – 特别是考虑到可选上下文参数的优点：

$( selector [,context ] )

这将查看数组的每个元素：

$.each(arr,val) {
  ...
});

这将获取th元素的index()(它是tr集合的直接子元素),其中text()与数组值匹配：

var col=  $('> th',tr)
              .filter(function() {
                return $(this).text()===val;
              })
              .index();

这是我们想要展示的专栏.

最后,这会向tr集合的每个成员追加具有该列号的所有子节点,并显示它们：

$(tr).append(function() {
  return $('> td,this).eq(col).show();
});

jQuery的append()方法(如JavaScript的appendChild()方法)将元素移动到DOM或DOM中的其他位置.

知道了这一点,我们经常可以避免使用诸如detach()之类的方法.