Вставка столбца таблицы с помощью jQuery

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

<table>
 <tr><td>cell 1</td><td>cell 2</td><td>cell 3</td></tr>
 <tr><td>cell 1</td><td>cell 2</td><td>cell 3</td></tr>
 <tr><td>cell 1</td><td>cell 2</td><td>cell 3</td></tr>
</table>

Я хотел бы вставить столбец между ячейкой 1 и ячейкой 2 в каждой строке... Я пробовал это, но он просто не работает, как я ожидаю...

$(document).ready(function(){
 $('table').find('tr').each(function(){
  $(this).prepend('<td>cell 1a</td>');
 })
})

Ответ 1

Попробуйте следующее:

$(document).ready(function(){
    $('table').find('tr').each(function(){
        $(this).find('td').eq(0).after('<td>cell 1a</td>');
    });
});

Ваш исходный код добавит столбец в конец каждой строки, а не между столбцами. Это находит первый столбец и добавляет ячейку рядом с первым столбцом.

Ответ 2

$('table > tr > td:first-child').after( '<td>cell 1a</td>' );

tr > td выбирает td первого уровня после a tr и after вставляет данные вне элемента.

Ответ 3

$('td:first-child').after('&lt;td&gt;new cell&lt;/td&gt;');