javascript - 根据所选的第一列选择 HTML 表格的 2 列

Question

我有一个包含 7 列的 HTML 表格。当我选择一列时，我希望隐藏除所选列旁边的列之外的所有其他列。需要明确的是，一次只需要显示 2 列 - 这些是选定的一列和旁边的一列。如果所选列的右侧有一列，则该列应与所选列一起显示，如果没有(选择最后一列)，则左侧的列应与所选列一起显示。

我尝试使用循环，但问题是用户可以从表中选择任何列。

我的代码:

    var I = document.getElementsByTagName("th").length;
    if(s=== I-1) { // s - index of selected column- check if its the last column
        for (var D = 0; D < I-2; D++) {
            var o = datatable.column(D);
            o.visible(!o.visible());
        }
    } else {
        for (var D = 0; D < s; D++) {                            
            var o = datatable.column(D);
            o.visible(!o.visible());
        }

        for (var D = s+1; D < I; D++) {                         
            var o = datatable.column(D);
            o.visible(!o.visible());               
        }
   }

我的 HTML:

<table id="DataTables_Table_0" >
    <thead>
        <tr role="row" style="height: 0px;">
            <th>
                <div>Pro</div>
            </th>
            <th>
                <div>Pri</div>
            </th>
            <th>
                <div>State</div>
            </th>
            <th>
                <div>phyId</div>
            </th>
            <th>
                <div>Title</div>
            </th>
            <th>
                <div>Origin</div>
            </th>
            <th>
                <div>type</div>
            </th>
        </tr>
    </thead>
    <tbody style="">
        <tr role="row" class="odd">
            <td class="0 sorting_1">Private</td>
            <td class="1">High</td>
            <td class="2">Create</td>
            <td class="3">E210DC29509F</td>
            <td class="4">5</td>
            <td class="5">8/9/2019, 8:24:00 AM</td>
            <td class="6">Issue</td>
        </tr>
        <tr role="row" class="even">
            <td class="0 sorting_1">Public</td>
            <td class="1">Low</td>
            <td class="2">Assign</td>
            <td class="3">E210DC29509F</td>
            <td class="4">5</td>
            <td class="5">8/9/2019, 9:11:11 AM</td>
            <td class="6">Issue</td>
        </tr>
        <tr role="row" class="odd">
            <td class="0 sorting_1">Private</td>
            <td class="1">Medium</td>
            <td class="2">Assign</td>
            <td class="3">E210DC29509F</td>
            <td class="4">5</td>
            <td class="5">8/9/2019, 9:17:26 AM</td>
            <td class="6">Issue</td>
        </tr>
        <tr role="row" class="even">
            <td class="0 sorting_1">Public</td>
            <td class="1">Urgent</td>
            <td class="2">Active</td>
            <td class="3">E210DC29509F</td>
            <td class="4">5</td>
            <td class="5">8/8/2019, 4:14:59 PM</td>
            <td class="6">Issue</td>
        </tr>
    </tbody>
</table>

问题的更新:我可以始终选择第一列和用户选择的列。所以这意味着我不必从表中手动选择相邻的列。我刚刚修改了代码:

for (var D = 1; D < I/2 ; D++) { 
                            if (D !== s ) {
                                var o = f.datatable.column(D);
                                o.visible(!o.visible());
                            }
                        }

现在它按预期工作了。实际上这是为了为表数据生成折线图。现在我得到了一个折线图，但我只是对折线图是否看起来像预期的那样感到困惑。我的意思是我已经附上了折线图的屏幕截图，但看起来还有更多事情要做。抱歉没有提及折线图，因为我认为这会让问题变得更加复杂和困惑。 linechart tabledata for the line chart

折线图与我的表格到底应该是什么样子。

Answer 1

我会让这些 td 类名更加明确，这样它们就可以清楚地标记列(例如 col-0)，然后根据这些来查询 DOM。

选择更改时:

1. 隐藏所有列。
2. 获取正在选择的索引。
3. 计算要显示的两个列类名称。
4. 查询这些类名并显示那些 DOM 节点。

这是一些(未经测试的)示例 js:

$('th, td').hide();
// for the OP: make sure colIndex isn't the rightmost col
const selectedCol = 'col-' + colIndex; 
const nextCol = 'col-' + (colIndex + 1);
$('.' + selectedCol).show();
$('.' + nextCol).show();