如何将列插入表中?

时间:2013-08-08 06:57:03

标签: javascript jquery html-table

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

3 个答案:

答案 0 :(得分:2)

如果您只是在后面添加列,不需要疯狂拆分等,我会保持这么简单。

这也不取决于选项的价值。

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

DEMO: http://jsfiddle.net/shannonhochkins/vJvam/4/

答案 1 :(得分:0)

嘿哥们就是你想要的

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

LIVE DEMO @ jsfiddle

快乐编码:)

答案 2 :(得分:0)

请参阅: 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>");
 });