使用jQuery / JavaScript操作HTML表（用於列重新排序，可見性）？

Question

我有一個ASP.NET MVC站點，我在視圖中有一個HTML表。 根據示例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>

我現在想要使用這個jQuery multiselect插件來允許用戶選擇他們想要的列的順序以及顯示/隱藏某些列所以我創建了一個如下所示的多選：

<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>

允許用戶選擇訂購，然后我暫時將這些數據存儲在本地存儲中。 所以我存儲的是一個字符串數組，表示“列的可見順序”，用於設置多選選擇器。 這工作正常，我能夠持久化此數組或“有序列名稱”。

我的問題是獲取此字符串數組並更新HTML表以反映此列排序和列可見性的最佳方法是什么？

我知道有更大的html表格網格框架具有此功能，但在這種情況下，我需要堅持手動編碼的html表。

更新：

@Rick Hitchcock在下面的回答讓我有90％的路在那里但是有一個未解決的問題讓我覺得有點復雜了我的問題。 在某些情況下，我在主表中有一個嵌套表。 我已更新問題以包括這種情況。 我不希望列選擇器代碼影響嵌套表，所以我正在尋找一種方法讓代碼影響主表。

Answer 1

給定一個像這樣的數組（ 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();
  });
});

小提琴

單擊按鈕可對表重新排序。

---

這個怎么運作

這會將后續選擇器限制為主表的行：

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

即使您排除tbody ， 也會為您添加 。 因此，這始終是一個空集合： $('#mainTable > tr') 。

---

這只隱藏了tr集合的直接子tr （來自上一行）：

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

作為副作用，所有后代也將被隱藏。

它相當於：

$( selector [, context ] )

當你可以使用CSS選擇器完成相同的事情時，jQuery的children節點和find方法通常是不必要的（並且代價高昂） - 特別是考慮到可選context參數的優點：

 $( selector [, context ] ) 

---

這將查看數組的每個元素：

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

---

這將獲取th元素的index() （即tr集合的直接子元素），其中text()與數組值匹配：

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

這是我們想要展示的專欄。

---

最后，這會向tr集合的每個成員追加具有該列號的所有子節點，並顯示它們：

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

jQuery的append()方法（就像JavaScript的appendChild()方法）將元素移動到DOM或DOM中的其他位置。

知道這一點，我們經常可以避免使用detach()等方法。

---