根據所選的第一列選擇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>

問題的更新：我可以始終選擇第1列與用戶選擇的列。 因此，這意味着我不必從表中手動選擇相鄰的列。 我剛剛修改了代碼：

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

現在它可以按預期工作了。 實際上，這是為表格數據生成折線圖。 現在，我得到了一個折線圖，但是對於折線圖是否確實符合預期，我感到困惑。 我的意思是我已經附上了折線圖的屏幕截圖，但是看起來還有很多事情要做。 對不起，我沒有提到折線圖，因為我認為這會使問題變得更加復雜和混亂。 應用於LineChart 資料表的線圖表

折線圖應該如何與我的表格一起顯示。

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();

Answer 2

獲取所有列的計數。 然后隱藏所有列。 然后僅顯示選定的，下一列或上一列

 var I = document.getElementsByTagName("th").length; function hideCol(s){ datatable.columns( 'th' ).visible( false ); if(s == I-1){ datatable.column(s).visible(true); datatable.column(s-1).visible(true); }else if(s < I){ datatable.column(s).visible(true); datatable.column(s+1).visible(true); } } hideCol(2);