Question

我正在尝试使用jQuery向表中添加新行和列，但是在添加新行和列时，表的css属性丢失，即表格边框不会用于新添加的行。这是我的代码：

   //Add new rows
     $('#btn3 li a:eq(0)').on('click', function (){

     var numcols = $('#tab1 tr:eq(0) td').length;
     var row = document.createElement('tr');

     //Insert name
     var name_td = document.createElement('td');
     row.appendChild(name_td);
     name_td.appendChild(document.createTextNode(name));

     //fill the rest with empty td's
     for (var i=1; i < numcols; i++) {
         row.appendChild(document.createElement('td'));
     }

     $('#tab1').append(row);
     }); 

   //Add new coloumn

   $('#btn3 li a:eq(1)').on("click", function (){
      $('#tab1').find('tr').each(function(){
        $(this).append('<td></td>');
        });
     });

Html代码在这里：

<table class="table table-bordered" id="tab1">
    <thead class="mbhead">
       <tr class="mbrow">
          <th></th>
          <th>A</th>
          <th>B</th>
          <th>C</th>
          <th>D</th>
          <th>E</th>
          <th>F</th>
          <th>G</th>
          <th>H</th>
          <th>I</th>
          <th>J</th>
          </tr>
   </thead>
<tbody>
   <tr>
     <td class="crow">1</td>
     <td>asd</td>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
     <td>ddd</td>
     <td></td>
     <td></td>
     <td></td>
  </tr>
  <tr>
    <td class="crow">2</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td class="crow">3</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td class="crow">4</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
 </tbody>

Answer 1

问题是你的tr 0是0长度，因为它是你的，所以你可能需要：

var numcols = $('#tab1').find('thead th').length;

这是一个代码示例（稍微重做）http://jsfiddle.net/XdMqD/1/

以下是代码：注意：我没有你所有的布局，所以我创建了几个按钮：

$('#btn3').on('click', function () {
    var name = "Feidrich";
    var numcols = $('#tab1').find('thead th').length;
    var row = $('<tr />');
    //Insert name
    var name_td = '<td >' + name + numcols + '</td>';
    row.append(name_td);
    //fill the rest with empty td's
    for (var i = 1; i < numcols; i++) {
        $('<td />').appendTo(row);
    }
    row.appendTo('#tab1');
});

//Add new coloumn

$('#btn4').on("click", function () {
    $('#tab1').find('tr').each(function () {
        $(this).append('<td>&nbsp;</td>');
    });
});

编辑注意：我不知道你的css所以我用过：

.table-bordered {
    border:solid lime 2px;
}
.table-bordered td {
    border:solid green 2px;
}

EDIT2：修复列添加 - 注意我添加了一个空白标题 - 你可以看到你想要的其他东西：

$('#btn4').on("click", function () {
    $('#tab1').find('tr').eq(0).append('<th>&nbsp</th>')
    var mycontent = $('#tab1').find('tr:not(:eq(0))'); //.not(':eq(0)');
    mycontent.each(function () {
        $(this).append('<td>&nbsp;</td>');
    });
});

更新了这个：http://jsfiddle.net/XdMqD/2/

如何使用预定义属性在表中添加新行和列？

1 个答案: