Динамическое добавление столбцов в середину таблицы

У меня есть таблица, в которой столбцы должны быть динамически добавлены или удалены в середине таблицы (с использованием JavaScript/jQuery).Динамическое добавление столбцов в середину таблицы

<table> 
    <tr> 
    <td>Col 1</td> 
    <td>Col 2</td> 
    <!-- INSERT COLUMN(S) HERE --> 
    <td>Col 3</td> 
    </tr> 
    <tr> 
    <td>Jack</td> 
    <td>Jill</td> 
    <!-- INSERT COLUMN(S) HERE --> 
    <td>John</td> 
    </tr> 
</table>

Идея состоит в том, что я хочу развернуть или свести таблицу по мере необходимости динамически. То, как я подготовил вещи, - это заменить  тегом с идентификатором, например. <span id="newcols"></span>, а затем используйте $('#newcols').html('<td>abc</td>');, чтобы вставить столбцы и $('#newcols').html('');, чтобы удалить их.

Однако <span> не работает, и FireFox ударяет его над тегом <table> в DOM. Есть ли семантически допустимый тег, который я могу использовать для этого?

Спасибо!

источник

2015-03-16 R C

Вы можете использовать td вместо span, дать ему класс newcols и css поставить .newcols как display: none, тогда вы заменяете содержимое по мере необходимости и показываете столбец – juvian

Спасибо за это, но проблема в том, что номер столбцов неизвестно и динамически генерируется. Это может быть 1, но это может быть 5. –

И как вы узнаете, где вам нужно их вставить? – juvian

Используя переключатель() http://api.jquery.com/toggle/, вот мой пример в FIDDLE

$('#toggleCol').click(function() { 
    $('.newcols').toggle(); 
});

HTML

<table> 
    <tr> 
    <td>Col 1</td> 
    <td>Col 2</td> 
    <td class='newcols' style='display:none'>Col hidden show</td> 
    <td>Col 3</td> 
    </tr> 
    <tr> 
    <td>Jack</td> 
    <td>Jill</td> 
    <td class='newcols' style='display:none'>Col hidden show</td> 
    <td>John</td> 
    </tr> 
</table> 

<input type='button' id='toggleCol' value='toggle me' />

источник

2015-03-16 18:06:23 user86745458

HTML:

<table> 
    <tr> 
    <td>Col 1</td> 
    <td class='insertionPoint'>Col 2</td> 
    <td>Col 3</td> 
    </tr> 
    <tr> 
    <td>Jack</td> 
    <td class='insertionPoint'>Jill</td> 
    <td>John</td> 
    </tr> 
</table>

Javascript:

// to insert 
$(".insertionPoint").after("<td class='insertedColumns'>abc</td>"); 

// to remove 
$(".insertedColumns").remove();

источник

2015-03-16 18:15:31 radiaph

Хорошо, это не совсем то, что мне нужно, но ты поставил меня на правильный путь. Большое спасибо! –

Вариант 1:

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

$("table tr td:nth-child(2)").after('<td>new cell added</td>'); 

         OR 

$("#table1").find('td').eq(<column-number>).after('<td>new cell added</td>');

Вариант 2:

HTML:

<tr> 
     <td>Col 1</td> 
     <td>Col 2</td> 
     <td class="thirdCol"><!--value here --></td> 
     <td>Col 3</td> 
     </tr>

Jquery:

$(".thirdCol").html("new dataadded");

Есть много других способов тоже. Сообщите нам, если вы все еще не нашли своего решения.

источник

2015-03-16 18:34:34

Динамическое добавление столбцов в середину таблицы

ответ

Смежные вопросы