根据所选的第一列选择 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>

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

for (var D = 1; D < I/2 ; D++) { 

                            if (D !== s ) {

                                var o = f.datatable.column(D);

                                o.visible(!o.visible());

                            }

                        }

现在它按预期工作。实际上这是为表格数据生成折线图。现在我得到了一个折线图，但我很困惑折线图是否确实如预期的那样。我的意思是我附上了折线图的屏幕截图，但看起来还有很多事情要做。很抱歉没有提及折线图，因为我认为这会使问题变得更加复杂和混乱。

折线图与我的表格究竟应该如何搭配。

Answer 1

获取所有列的计数。然后隐藏所有列。然后只显示选定的和下一列或上一列var I = document.getElementsByTagName("th").length;function hideCol(s){&nbsp; &nbsp; datatable.columns( 'th' ).visible( false );&nbsp; &nbsp; if(s == I-1){&nbsp; &nbsp; &nbsp; &nbsp; datatable.column(s).visible(true);&nbsp; &nbsp; &nbsp; &nbsp; datatable.column(s-1).visible(true);&nbsp; &nbsp; }else if(s < I){&nbsp; &nbsp; &nbsp; &nbsp; datatable.column(s).visible(true);&nbsp; &nbsp; &nbsp; &nbsp; datatable.column(s+1).visible(true);&nbsp; &nbsp; }}hideCol(2);