javascript - 如何在表格中插入列？

Question

我有一个表，我试图在第一行的给定值的左右插入一列。你可以在这里看到它的演示：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 Guru 可以帮助我吗？

Answer 1

我会保持简单，如果您只是在之后添加列，则无需疯狂拆分等。

这也不取决于期权的价值。

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

Answer 2

看到这个：演示

 $("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>");
 });

Answer 3

嘿伙计这是你想要的

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

快乐编码:)