jQuery добавить столбец таблицы HTML

У меня есть таблица HTML, как это:

<table border="1">
    <tbody>
        <tr>
            <td><a href="#" class="delete">DELETE ROW</a>COL 1</td>
            <td><a href="#" class="delete">DELETE COL</a>COL 2</td>
            <td><a href="#" class="delete">DELETE COL</a>COL 3</td>
            <td><a href="#" class="delete">DELETE COL</a>COL 4</td>
            <td><a href="#" class="delete">DELETE COL</a>COL 5</td>
            <td><a href="#" class="delete">DELETE COL</a>COL 6</td>
        </tr>
        <tr>
            <td>ROW 1</td>
            <td>ROW 1</td>
            <td>ROW 1</td>
            <td>ROW 1</td>
            <td>ROW 1</td>
            <td>ROW 1</td>
        </tr>
        <tr>
            <td>ROW 2</td>
            <td>ROW 2</td>
            <td>ROW 2</td>
            <td>ROW 2</td>
            <td>ROW 2</td>
            <td>ROW 2</td>
        </tr>
    </tbody>
</table>

Мне нужна функция для добавления нового столбца с количеством td на основе других столбцов. Дело в том, что в этой таблице HTML столбцы удаляются с помощью jQuery до добавления новых столбцов, поэтому функция должна получить текущую конфигурацию столбца и соответствующим образом адаптироваться, поскольку строки и столбцы всегда удаляются или добавляются.

У меня есть этот код для добавления нового столбца, но он не добавляет заголовок:

function addACol() {
    var currentNumberOfTDsInARow = $('.tblModel tr:first td').length;
    newColNum = currentNumberOfTDsInARow;
    var rows = $('.tblModel tbody tr');
    for (var i = 0; i < rows.length; i++) {
        var lastTDClone = $(rows[i]).find('td:last').clone();
        $(rows[i]).find('td:last').after(lastTDClone);
    }
}

html jquery html-table
person Manny Calavera    schedule 02.07.2009    source источник

Ответы (2)


arrow_upward
44
arrow_downward

Обновлять...

var c = $("#myTable tr:first td").length;
$("#myTable tr:first").append("<td><a href=''>Delete</a> Col "+(c+1)+"</td>");
$("#myTable tr:gt(0)").append("<td>Col</td>");

Если вам нужно исправить нумерацию в заголовках, вы можете использовать функцию, над которой мы работали в предыдущем вопрос.

Оригинальный ответ...

$("#myTable tr").append("<td>New Column</td>");

Или, если вы хотите добавить заголовок, вы можете ограничить предыдущую строку всеми значениями TR больше 0:

$("#myTable tr:gt(0)").append("<td>New Column</td>");

И заголовок будет только на первом TR:

$("#myTable tr:first").append("<td>Delete Column LINK</td>");
person Sampson    schedule 02.07.2009
comment
В том-то и дело... На самом деле нужно вычислить количество td из последнего столбца или что-то в этом роде... Есть много строк.. - person Manny Calavera; 02.07.2009
comment
Если вы добавляете только один столбец, вы вставляете только один ‹TD› для каждого ‹TR›. - person Sampson; 02.07.2009
comment
Если вы хотите выяснить, какой номер туда вставить, вы можете просмотреть td для этого tr и повторно вставить числа для каждого на основе их индекса. - person Sampson; 02.07.2009
comment
Может быть, вы можете объяснить, что вы подразумеваете под вычислением последнего столбца. Приведите пример значений в другом столбце. - person Vincent Ramdhanie; 02.07.2009
comment
Рад, что смог помочь. Если мы продолжим в том же духе, я в конечном итоге стану вашим официальным парнем по jQuery — я ожидаю, что мне заплатят наличными :) - person Sampson; 02.07.2009
comment
это не работает должным образом. он показывает столбец во всей ячейке, я ожидаю, что он покажет столбец 1, столбец 2, столбец 3, столбец 4 и т. д. в качестве примера html. - person David; 06.07.2010

arrow_upward
10
arrow_downward

Не связано с вашим вопросом, но вы можете сделать свой HTML более семантическим.

<table border="1">
    <thead>
        <tr>
            <th><a href="#" class="delete">DELETE ROW</a>COL 1</th>
            <th><a href="#" class="delete">DELETE COL</a>COL 2</th>
            <th><a href="#" class="delete">DELETE COL</a>COL 3</th>
            <th><a href="#" class="delete">DELETE COL</a>COL 4</th>
            <th><a href="#" class="delete">DELETE COL</a>COL 5</th>
            <th><a href="#" class="delete">DELETE COL</a>COL 6</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>ROW 1</td>
            <td>ROW 1</td>
            <td>ROW 1</td>
            <td>ROW 1</td>
            <td>ROW 1</td>
            <td>ROW 1</td>
        </tr>
        <tr>
            <td>ROW 2</td>
            <td>ROW 2</td>
            <td>ROW 2</td>
            <td>ROW 2</td>
            <td>ROW 2</td>
            <td>ROW 2</td>
        </tr>
    </tbody>
</table>

Измененный код jQuery может выглядеть так:

var c = $("#myTable thead th").length;
$("#myTable thead tr").append("<th><a href=''>Delete</a> Col "+(c+1)+"</th>");
$("#myTable tr:gt(0)").append("<td>Col</td>");
person SolutionYogi    schedule 02.07.2009
comment
Или сделайте последнюю строку кода такой: $("#myTable tbody tr").append("<td>Col</td>"); и избавьтесь от :gt(0). - person Tauren; 26.08.2010