javascript - 如果标题为“无”，则隐藏/删除最后一列

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。每次用户更改列名时，都必须单击一个按钮，以便表根据新的更改进行刷新。 当最后一列的名称将变为“无”时，程序应隐藏/删除最后一列。 我已经在函数中尝试过这段代码来重新加载数据

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";
                    }
                }
            }

但是因为我的表的长度菜单最初设置为 10，所以当我想查看其他数据时，它还会显示第三列。对于前 10 个数据行，它工作得很好。有什么方法可以隐藏/删除其他数据行的最后一列(例如前 10 行)？

Answer 1

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

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

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

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

我认为应该可以。