Невозможно удалить столбец с ячейками

Question

Невозможно удалить столбец с ячейками

0

Я не могу удалить столбец со всеми ячейками. Он отлично работает, если я пытаюсь удалить последний столбец, но если я попытаюсь удалить столбец до последнего, он не работает должным образом.

Вот как выглядит мой 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/

Asdfg 23 фев. 2014, в 02:36

Источник

Теги:

javascript

jquery

html-table

2 ответа

0

У вас проблемы, потому что вы помещаете таблицу в таблицу, поэтому столбцы ваших двух строк не соответствуют. Ваша вторая строка должна быть такой:

<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/

leonardo_palma 23 фев. 2014, в 01:40

0

причина, по которой я помещаю P1 P2 P3 в отдельную таблицу, заключается в том, что я хочу, чтобы они были столбцами. Это 3 разных столбца внутри коллекции. Как Матрица.
Asdfg 23 фев. 2014, в 04:31

Ещё вопросы

причина, по которой я помещаю P1 P2 P3 в отдельную таблицу, заключается в том, что я хочу, чтобы они были столбцами. Это 3 разных столбца внутри коллекции. Как Матрица.

Matt Tabor · Accepted Answer · 2014-02-23T01-01-00.000Z

я обновил ваш скрипт, это должно работать

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

});
});