Question

我无法删除包含所有单元格的列。如果我尝试删除最后一列但是如果我尝试在最后一列之前删除该列，则它工作正常。它不能按预期工作。

这就是我的HTML的样子：

        <table id="tblData">
            <thead>
                <tr style="background-color:green" id="trMain">
                    <th>Fixed 1</th>
                    <th>Fixed 2</th>
                    <th>Fixed 3</th>
                    <th id="Collection1">Collection 1</th>
                    <th id="Collection2">Collection 2</th>
                </tr>
                <tr style="background-color:red" id="trSub">
                    <th>E1</th>
                    <th>E2</th>
                    <th>E3</th>
                    <th>
                        <table>
                            <thead>
                                <tr>
                                    <th>P1</th>
                                    <th>P2</th>
                                    <th>P3</th>
                                </tr>
                            </thead>
                        </table>
                    </th>
                    <th>
                        <table>
                            <thead>
                                <tr>
                                    <th>P1</th>
                                    <th>P2</th>
                                    <th>P3</th>
                                </tr>
                            </thead>
                        </table>
                    </th>
                </tr>
            </thead>
        </table>


<button type="button" id="btnGet">Delete a Column</button>

这就是我的JS的样子：

$(document).ready(function () {
    var colToDelete = 'Collection2';
    $('#btnGet').click(function(){

            var column = $("#tblData").find('#' + colToDelete);
            var row = column.parent('tr').children();
            var idx = row.index(column);
            alert(idx)
            $("#trMain").find("th:eq(" + idx + ")").remove();
            alert(idx)
            $("#trSub").find("th:eq(" + idx + ")").remove();

    });
});

这是JS小提琴：http://jsfiddle.net/cH654/

Answer 1

我已经更新了你的脚本，这应该可行

$(document).ready(function () {
var colToDelete = 'del1';
$('#btnGet').click(function(){

        var column = $("#tblData").find('#' + colToDelete);
        var row = column.parent('tr').children();
        var idx = row.index(column);
        $("#trMain").find("th:eq(" + idx + ")").remove();
        $("#trSub > th:eq(" + idx + ")").remove();

});
});

Answer 2

您遇到问题是因为您在表中放置了一个表，因此两行的列不对应。你的第二行应该是这样的：

<tr style="background-color:red" id="trSub">
      <th>E1</th>
      <th>E2</th>
      <th>E3</th>
      <th>P1 P2 P3</th>
      <th>P1 P2 P3</th>
</tr>

你的jquery函数应该像这样简单：

$('#btnGet').click(function(){
     $("#trMain th").last().remove();
     $("#trSub th").last().remove();     
});

这是有效的：http://jsfiddle.net/cH654/5/

无法删除包含单元格的列

2 个答案: