如何在表中插入列

How do I insert column into table?

本文关键字：插入列      更新时间：2023-09-26

我有一个表，我试图在第一行的给定值的左右两侧插入一列。你可以在这里看到它的演示：http://jsfiddle.net/ismailp/vJvam/1/

<table>
    <tbody>
        <tr>
            <td>tag 1</td>
            <td>tag 2</td>
            <td>tag 3</td>
            <td>tag 4</td>
            <td>tag 5</td>
            <td>tag 6</td>
        </tr>
        <tr>
            <td>Some other value1</td>
            <td>Some other value1</td>
            <td>Some other value1</td>
            <td>Some other value1</td>
            <td>Some other value1</td>
            <td>Some other value1</td>
        </tr>
    </tbody>
</table>

我已经使它适用于表中的一行，但不适用于n+1行。jQuery大师能帮我吗？

我会保持简单，如果你只是在后面添加列，不需要疯狂的拆分等。

这也不取决于选项的值。

$('select').change( function() {
    var option = $(this);
    var index = option.get(0).selectedIndex;
    var tr = $('#table tbody tr');
    var td = '<td class="red">FOO</td>';
    tr.each(function(){
        $(td).insertAfter($(this).find('td').eq(index));
    });
});

演示：http://jsfiddle.net/shannonhochkins/vJvam/4/

请参阅：DEMO

 $("tbody tr").each( function() {
   $(this).find("td:eq(" + cellBefore + ")").after("<td>" + spliceFirst + "</td>");
   $(this).find("td:eq(" + cellAfter + ")").after("<td>" + spliceLast + "</td>");
 });

简化：DEMO2

 $("tbody tr").each( function() {
    $(this).find("td:eq(" + column + ")").after("<td>" + spliceFirst + "</td>").before("<td>" + spliceLast + "</td>");
 });

嘿，伙计，这就是你想要的吗

$('select').change(function () {
   var selectedVal = $(this).val();
   // var column = $('td').filter(function() {
   //     return $(this).text() == selectedVal;
   // }).index();
   $('td').each(function () {
      if ($(this).text() === selectedVal) {
          $(this).before('<td>' + $(this).text() + '-before</td>');
          $(this).after('<td>' + $(this).text() + '-after</td>')
      }
   });
   //alert(column);
});

jsfiddle 现场演示

快乐编码：）

相关文章：