使用jQuery / JavaScript处理HTML表(用于列重新排序,可见性)?javascript


Answers

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表格。

更新:

希克考克的回答下面的答案让我有90%的方式,但有一个开放的问题,我认识到我的问题有点复杂。 在某些情况下,我在主表中有一个嵌套的表。 我已经更新了这个问题来包含这种情况。 我不希望列选择器代码影响嵌套表,所以我正在寻找一种方法只是让代码影响主表。