Hide/Delete 最后一列，如果标题是 None

Question

我有一个包含三列的数据表：

<div data-bind="attr:{'id':'TableA'+Id()}" class="panel-collapse collapse" style="height:auto; max-height:850px; overflow-x:hidden;">
                                    <table data-bind="attr:{'id':'TableAt'+Id()}" class="table table-striped table-bordered">
                                        <thead>
                                            <tr>
                                                <th>Vehicle</th>
                                                <th data-bind="attr:{'id':'AC1'+Id()}"></th>
                                                <th data-bind="attr:{'id':'AC2'+Id()}"></th>
                                                @*<th data-bind="text:C1">Counter 1</th>
                                                    <th data-bind="text:C2">Counter 2</th>*@
                                            </tr>
                                        </thead>
                                        <tbody data-bind="foreach: dataList">
                                            <tr>
                                                @*data-bind="style: { backgroundColor: Color }*@
                                                <td>
                                                    <span data-bind="text: Name">4</span>
                                                </td>
                                                <td>
                                                    <span data-bind="text: C1">4</span>
                                                </td>
                                                <td>
                                                    <span data-bind="text: C2">2</span>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>

最后两列的名称可以从 DropDown 更改，只有最后一列可以是 None。每次用户更改列的名称时，都必须单击一个按钮，以便 table 将根据新的更改进行刷新。当最后一列的名称将变为 "None" 时，程序应该 hide/delete 最后一列。我已经在重新加载数据的函数中尝试了这段代码

if (item.C2() == "None") {
                //$('#TableAt' + item.Id()).DataTable().column(2).visible(false);
                //$("#TableAt" + item.Id()).DataTable({ responsive: true });
                //$('')
                var tbl = document.getElementById("TableAt" + item.Id());
                for (var i = 0; i < tbl.rows.length; i++) {
                    for (var j = 0; j < tbl.rows[i].cells.length; j++) {
                        tbl.rows[i].cells[j].style.display = "";
                        if (j == 2)
                            tbl.rows[i].cells[j].style.display = "none";
                    }
                }
            }

但是因为我的 table 的长度菜单最初设置为 10，所以当我想查看其他数据时它也会显示第三列。对于前 10 个数据行，它工作得很好。 hide/delete 其他数据行的最后一列是否与前 10 列一样？

Answer 1

首先。将 DataTable 实例存储在全局变量中，例如

myDataTable = $("#example").DataTable()

这样你就不需要 document.getElementById("TableAt" + item.Id())。然后调用

myDataTable.column([name of column or index]).visible(false);

我认为应该这样做。

Hide/Delete 最后一列，如果标题是 None

Hide/Delete last column if heading is None

javascript

datatable

jquery