0

我正在尝试使用 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>

4

1 回答 1

1

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

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/

于 2013-03-04T13:05:16.067 回答