将列表动态附加到不同的行

时间：2017-09-21 03:02:49

标签： javascript jquery html twitter-bootstrap

我在下面有这样的表格

＆＃13;
＆＃13; 
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">


<div class="form-group">
<div class="row">
  <div class="col-md-12">
    <table width="100%" class="table table-striped table-bordered table-hover">
    <thead>
      <tr>
      <td rowspan="2" >Tgl. Group Temuan</td>
      <td rowspan="2">Ket</td>
      <td colspan="3">Temuan Pemeriksaan (TP)</td>
      <td colspan="3">TP yang ditindak lanjuti (TP)</td>
      <td rowspan="2">TPB s/d Bulan Ini</td>
      </tr>
      <tr>
      <td>TP s/d Bulan Lalu</td>
      <td>TP Bulan ini</td>
      <td>TP s/d Bulan ini</td>
      <td>TP s/d Bulan Lalu</td>
      <td>TP Bulan ini</td>
      <td>SUB TOTAL</td>
      </tr>
    </thead>
    <tbody>
   <tr>
   <td rowspan="2"></td>
   <td>Kejadian</td> 
   <td ></td>
   <td></td>
   <td></td>
     <div id="kej"></div>
    
   </tr>
   <tr>
   <td>Rp</td>
   <td></td>
   <td></td>
   <td></td>
   //this part that i want to add the td using jquery
   <tr>
    </tbody>
    <tfoot>
     <tr>
      <td rowspan="2">TOTAL</td>
      <td>Kejadian</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      //this part too
      </tr>
      <tr>
        <td>Rp</td>
         <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <div id="kej"></div>
      </tr>
    </tfoot>
    </table>
  </div>
 </div>
</div>
＆＃13;
＆＃13;
＆＃13;

我还有其他<td>我希望将其附加到我的表格中。在我的表中，有一行会让我混淆如何使用jquery动态添加<td>，而它有不同的<tr>？

我要添加的是此数据div，其ID为kej（您可以在我的代码段中看到）

我试过了

var html = '<td>0</td><td>0</td><td>0</td>'; 
$('#kej').append(html);

它没有给我任何结果，我也不知道如何在展位tr中添加。

//FOR THE FIRST 'kej' id ROW  
<td>0</td>
<td>0</td>
<td>0</td>
//FOR THE SECOND 'kej' id ROW
<td>0</td>
<td>0</td>
<td>0</td>

这是我想要的结果

＆＃13;
＆＃13; 
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">


<div class="form-group">
<div class="row">
  <div class="col-md-12">
    <table width="100%" class="table table-striped table-bordered table-hover">
    <thead>
      <tr>
      <td rowspan="2" >Tgl. Group Temuan</td>
      <td rowspan="2">Ket</td>
      <td colspan="3">Temuan Pemeriksaan (TP)</td>
      <td colspan="3">TP yang ditindak lanjuti (TP)</td>
      <td rowspan="2">TPB s/d Bulan Ini</td>
      </tr>
      <tr>
      <td>TP s/d Bulan Lalu</td>
      <td>TP Bulan ini</td>
      <td>TP s/d Bulan ini</td>
      <td>TP s/d Bulan Lalu</td>
      <td>TP Bulan ini</td>
      <td>SUB TOTAL</td>
      </tr>
    </thead>
    <tbody>
   <tr>
   <td rowspan="2"></td>
   <td>Kejadian</td> 
   <td ></td>
   <td></td>
   <td></td>
     <div id="kej"></div>
       <td>0</td>
      <td>0</td>
      <td>0</td>
   </tr>
   <tr>
   <td>Rp</td>
   <td></td>
   <td></td>
   <td></td>
    <div id="kej">
     <td>0</td>
      <td>0</td>
      <td>0</td></div>
   <tr>
    </tbody>
    <tfoot>
     <tr>
      <td rowspan="2">TOTAL</td>
      <td>Kejadian</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
     
      </tr>
      <tr>
        <td>Rp</td>
         <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
     
      </tr>
    </tfoot>
    </table>
  </div>
 </div>
</div>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

首先修复您的表格结构，然后使用this作为参考。您可以看到它动态地向表中添加新行。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <table id="myTable">
    <thead>
      <tr>
        <td>Heading 1</td>
        <td>Heading 2</td>
        <td>Heading 3</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Default td1</td>
        <td>Default td1</td>
        <td>Default td1</td>
      </tr>
    </tbody>
    </table>
  <button id="addNewRow">Add New Record</button>
  <script>
$(document).ready(function (){

          var newRow = "<tr><td>New Row</td><td>New Row</td><td>New Row</td></tr>"
          $('#addNewRow').click(function(){
            $('#myTable tbody').append(newRow);
          });

});
  </script>

答案 1 :(得分：1)

试试这个。 

$(".kej td:last-child").each(function(){
  $(this).after("<td>0</td><td>0</td><td>0</td><td>0</td>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">


    <div class="form-group">
    <div class="row">
      <div class="col-md-12">
        <table width="100%" class="table table-striped table-bordered table-hover">
        <thead>
          <tr>
          <td rowspan="2" >Tgl. Group Temuan</td>
          <td rowspan="2">Ket</td>
          <td colspan="3">Temuan Pemeriksaan (TP)</td>
          <td colspan="3">TP yang ditindak lanjuti (TP)</td>
          <td rowspan="2">TPB s/d Bulan Ini</td>
          </tr>
          <tr>
          <td>TP s/d Bulan Lalu</td>
          <td>TP Bulan ini</td>
          <td>TP s/d Bulan ini</td>
          <td>TP s/d Bulan Lalu</td>
          <td>TP Bulan ini</td>
          <td>SUB TOTAL</td>
          </tr>
        </thead>
        <tbody>
       <tr class="kej">
       <td rowspan="2"></td>
       <td>Kejadian</td> 
       <td ></td>
       <td></td>
       <td></td>
       </tr>
       <tr class="kej">
       <td>Rp</td>
       <td></td>
       <td></td>
       <td></td>
       <tr>
        </tbody>
        <tfoot>
         <tr>
          <td rowspan="2">TOTAL</td>
          <td>Kejadian</td>
          <td>0</td>
          <td>0</td>
          <td>0</td>
          <td>0</td>
          <td>0</td>
          <td>0</td>
          <td>0</td>
         
          </tr>
          <tr>
            <td>Rp</td>
             <td>0</td>
          <td>0</td>
          <td>0</td>
          <td>0</td>
          <td>0</td>
          <td>0</td>
          <td>0</td>
         
          </tr>
        </tfoot>
        </table>
      </div>
     </div>
    </div>

相关问题
最新问题