如何在具有预定义属性的表中添加新行和列

How to add new rows and column in table with predefined attribute?

本文关键字：添加 新行 属性 预定义      更新时间：2023-09-26

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

问题是你的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/

相关文章：