0

I am trying to add new row and column to my table using jQuery but on adding new rows and colums,css properties of table is missing i.e table border is not coming for newly added rows.here is my code:

   //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 code is here:

<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 であるため、おそらく次のものが必要です。

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 に答える