Question

我有一个表，需要在表的中间动态添加或删除列（使用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>

我的想法是，我希望动态扩展或收缩表。我准备的方法是用带有ID的标签替换，例如<span id="newcols"></span>然后使用$('#newcols').html('<td>abc</td>');插入列，$('#newcols').html('');删除它们。

但是<span>无效，FireFox会将其提升到DOM中的<table>标记之上。是否有一个语义有效的标签，我可以用来实现这个？

谢谢！

Answer 1

使用切换（）http://api.jquery.com/toggle/，这是 FIDDLE

中的示例

<强> JS

$('#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' />

Answer 2

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

Answer 3

选项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");

还有很多方法。如果您仍未找到解决方案，请告诉我们。

动态地将列添加到表的中间

3 个答案: