将整个表追加/推入html中的另一个表

时间：2017-09-22 02:34:30

标签： jquery html html-table append

我有两张这样的表

表1 

+----------------------------------------
|   just        |         |    Many 1   |
|               |    Ket  |-------------|
|   desc        |         | 1 |  2 |  3 | 
+---------------+---------+-------------+
|     01        |  Kej    |   |    |    | 
|               |---------|-------------+
|               |  Rp     |   |    |    |
+---------------+------------------------
|     02        |  Kej    |   |    |    | 
|               |---------|-------------+
|               |  Rp     |   |    |    |
+---------------+------------------------
|     03        |  Kej    |   |    |    | 
|               |---------|-------------+
|               |  Rp     |   |    |    |
+---------------+------------------------
|     04        |  Kej    |   |    |    | 
|               |---------|-------------+
|               |  Rp     |   |    |    |
+---------------+------------------------
|     05        |  Kej    |   |    |    | 
|               |---------|-------------+
|               |  Rp     |   |    |    |
+---------------+------------------------

＆＃13;
＆＃13; 
 <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>
              
              </tr>
              <tr>
              <td>TP s/d Bulan Lalu</td>
              <td>TP Bulan ini</td>
              <td>TP s/d Bulan ini</td>
             
              </tr>
            </thead>
            <tbody>
           <tr>
           <td rowspan="2">01</td>
           <td>Kejadian</td> 
           <td ></td>
           <td></td>
           <td></td> 
           </tr>
           <tr>
           <td>Rp</td>
           <td></td>
           <td></td>
           <td></td>
         
           <tr>
           <tr>
           <td rowspan="2">05</td>
           <td>Kejadian</td> 
           <td ></td>
           <td></td>
           <td></td> 
           </tr>
           <tr>
           <td>Rp</td>
           <td></td>
           <td></td>
           <td></td>
            <tr>
           <tr>
           <td rowspan="2">02</td>
           <td>Kejadian</td> 
           <td ></td>
           <td></td>
           <td></td> 
           </tr>
           <tr>
           <td>Rp</td>
           <td></td>
           <td></td>
           <td></td>
            <tr>
           <tr>
           <td rowspan="2">03</td>
           <td>Kejadian</td> 
           <td ></td>
           <td></td>
           <td></td> 
           </tr>
           <tr>
           <td>Rp</td>
           <td></td>
           <td></td>
           <td></td>
           <tr>
           <tr>
           <td rowspan="2">04</td>
           <td>Kejadian</td> 
           <td ></td>
           <td></td>
           <td></td> 
           </tr>
           <tr>
           <td>Rp</td>
           <td></td>
           <td></td>
           <td></td>
           <tr>
            </tbody>
            </table>
          </div>
         </div>
        </div>
＆＃13;
＆＃13;
＆＃13;

表2 

+-------------------------------------------+
|   just        |         |   Many 2        |
|               |    Ket  |-----------------|
|   desc        |         |  1  |  2  |  3  | 
+---------------+---------+-----------------+
|     01        |  Kej    |     |     |     | 
|               |---------|-----------------+
|               |  Rp     |     |     |     |
+---------------+---------------------------+
|     02        |  Kej    |     |     |     | 
|               |---------|-----------------+
|               |  Rp     |     |     |     |
+---------------+---------------------------+
|     03        |  Kej    |     |     |     | 
|               |---------|-----------------+
|               |  Rp     |     |     |     |
+---------------+---------------------------+
|     04        |  Kej    |     |     |     | 
|               |---------|-----------------+
|               |  Rp     |     |     |     |
+---------------+---------------------------+
|     05        |  Kej    |     |     |     | 
|               |---------|-----------------+
|               |  Rp     |     |     |     |
+---------------+---------------------------+

＆＃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">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>SUB TOTAL</td>
      </tr>
    </thead>
    <tbody>
   <tr>
           <td rowspan="2">01</td>
           <td>Kejadian</td> 
           <td ></td>
           <td></td>
           <td></td> 
             <td></td>
           </tr>
           <tr>
           <td>Rp</td>
           <td></td>
           <td></td>
           <td></td>
            <td></td>
           </tr>
           <tr>
           <td rowspan="2">05</td>
           <td>Kejadian</td> 
           <td ></td>
           <td></td>
           <td></td> 
             <td></td>
           </tr>
           <tr>
           <td>Rp</td>
           <td></td>
           <td></td>
           <td></td>
             <td></td>
            </tr>
           <tr>
           <td rowspan="2">02</td>
           <td>Kejadian</td> 
           <td ></td>
           <td></td>
           <td></td>
             <td></td>
           </tr>
           <tr>
           <td>Rp</td>
           <td></td>
           <td></td>
           <td></td>
             <td></td>
            </tr>
           <tr>
           <td rowspan="2">03</td>
           <td>Kejadian</td> 
           <td ></td>
           <td></td>
           <td></td> 
             <td></td>
           </tr>
           <tr>
           <td>Rp</td>
           <td></td>
           <td></td>
           <td></td>
             <td></td>
           </tr>
           <tr>
           <td rowspan="2">04</td>
           <td>Kejadian</td> 
           <td ></td>
           <td></td>
           <td></td> 
             <td></td>
           </tr>
           <tr>
           <td>Rp</td>
           <td></td>
           <td></td>
           <td></td>
             <td></td>
           </tr>
    </tbody>
    
    </table>
  </div>
 </div>
</div>
＆＃13;
＆＃13;
＆＃13;

所以我必须将表2组合到表1中，我需要将表3的第3列中的数据转换到表1的第5列的下一列，就像下面的代码一样。

表1 +表2 

+---------------------------------------------------------+
|   just        |         |    Many 1   |   Many 2        |
|               |    Ket  |-------------|-----------------|
|   desc        |         | 1 |  2 |  3 |  1  |  2  |  3  | 
+---------------+---------+-------------+-----------------+
|     01        |  Kej    |   |    |    |     |     |     | 
|               |---------|-------------+-----------------+
|               |  Rp     |   |    |    |     |     |     |
+---------------+-----------------------------------------+
|     02        |  Kej    |   |    |    |     |     |     | 
|               |---------|-------------+-----------------+
|               |  Rp     |   |    |    |     |     |     |
+---------------+-----------------------------------------+
|     03        |  Kej    |   |    |    |     |     |     | 
|               |---------|-------------+-----------------+
|               |  Rp     |   |    |    |     |     |     |
+---------------+-----------------------------------------+
|     04        |  Kej    |   |    |    |     |     |     | 
|               |---------|-------------+-----------------+
|               |  Rp     |   |    |    |     |     |     |
+---------------+-----------------------------------------+
|     05        |  Kej    |   |    |    |     |     |     | 
|               |---------|-------------+-----------------+
|               |  Rp     |   |    |    |     |     |     |
+---------------+-----------------------------------------+

有人可以帮我解决这个问题吗，我不知道如何把表2的数据列放到表1中，就像我期望的那样？

3 个答案:

答案 0 :(得分：4)

我的jQuery解决方案

var el = $("#table2 thead tr:eq(0) td:eq(2)").clone();
$("#table1 thead tr:eq(0)").append(el);

$("#table2 thead tr:eq(1) td").each(function () {
    $("#table1 thead tr:eq(1)").append($(this).clone());
});

$('#table2 tbody tr').each(function (index) {
    $(this).find('td:nth-last-child(2), td:nth-last-child(3), td:nth-last-child(4)').each(function () {
        $("#table1 tbody").find("tr:eq(" + index + ")").append($(this).clone());
    });
});

演示： https://plnkr.co/edit/4moGtn?p=preview

JavaScript解决方案

var table1 = document.getElementById('table1');
var table2 = document.getElementById('table2');

var cell = (table2.tHead.rows[0].cells[2]).cloneNode(true);
table1.tHead.rows[0].appendChild(cell);

for(var i = 0, cells = table2.tHead.rows[1].cells; i < cells.length; i++) {
    table1.tHead.rows[1].appendChild( cells[i].cloneNode(true) );
}

for(var i = 0, rows = table2.tBodies[0].rows; i < rows.length; i++) {
    var cells = rows[i].cells, rowTable1 = table1.tBodies[0].rows[i];

    if(i%2)
        rowTable1.appendChild(cells[1].cloneNode(true));

        rowTable1.appendChild(cells[2].cloneNode(true));
        rowTable1.appendChild(cells[3].cloneNode(true));

    if(i%2 == 0)
        rowTable1.appendChild(cells[4].cloneNode(true));
}

演示： https://plnkr.co/edit/z67BEo?p=preview

答案 1 :(得分：1)

查看此DEMO：https://jsfiddle.net/DTcHh/37574/

我添加了一个按钮点击事件，只是为了区分组合之前和之后。

首先，你的表准备php代码在tbody部分是错误的，你需要一个结束tr标签。

错误的HTML输出

       <tr>
       <td>Rp</td>
       <td></td>
       <td></td>
       <td></td>

       <tr> <-- ***** HERE ***** -->
       <tr>
       <td rowspan="2">05</td>
       <td>Kejadian</td> 
       <td ></td>
       <td></td>
       <td></td> 
       </tr>

然后在需要时调用表组合功能。

我的代码并不漂亮，因为有部分，而且tbody也有rowpan部分。

*但你有了这个想法和工作脚本。

JQUERY 

$('#btn_combine').on('click', function() {
    $(this).hide(0);
    combineTable();
});

function combineTable() {
    // prepare thead first
    $('#tbl_1 thead tr').eq(0).append('<td colspan="3">' + $('#tbl_2 thead tr').eq(0).find('td').eq(2).text() + '</td>');

    var th1 = $('#tbl_2 thead tr').eq(1).find('td').eq(0).text();
    var th2 = $('#tbl_2 thead tr').eq(1).find('td').eq(1).text();
    var th3 = $('#tbl_2 thead tr').eq(1).find('td').eq(2).text();
    $('#tbl_1 thead tr').eq(1).append('<td>' + th1 + '</td><td>' + th2 + '</td><td>' + th3 + '</td>');

    // prepare tbody
    for (var i = 0; i < $('#tbl_2 tbody tr').length; i++) {
        if (i % 2 === 0) {
            var r1_td1 = $('#tbl_2 tbody tr').eq(i).find('td').eq(2).text();
            var r1_td2 = $('#tbl_2 tbody tr').eq(i).find('td').eq(3).text();
            var r1_td3 = $('#tbl_2 tbody tr').eq(i).find('td').eq(4).text();

            var e = '<td>' + r1_td1 + '</td><td>' + r1_td2 + '</td><td>' + r1_td3 + '</td>';
        } else {
            var r2_td1 = $('#tbl_2 tbody tr').eq(i).find('td').eq(1).text();
            var r2_td2 = $('#tbl_2 tbody tr').eq(i).find('td').eq(2).text();
            var r2_td3 = $('#tbl_2 tbody tr').eq(i).find('td').eq(3).text();

            var e = '<td>' + r2_td1 + '</td><td>' + r2_td2 + '</td><td>' + r2_td3 + '</td>';
        }
        $('#tbl_1 tbody tr').eq(i).append(e);
    }
}

答案 2 :(得分：1)

我的解决方案包括两个步骤：

  1. 合并标题

    2. 在此步骤中，我将仅选择所需的列＆amp;将它们与第一个表合并，因为您知道我们不必复制此列：

        +-------------------------+
    |   just        |         |
    |               |    Ket  |
    |   desc        |         | 
    +---------------+---------+

    所以我将使用这段代码说第一行我们只想添加最后一列，但是在第二行我们将添加所有列：

    //Merging the header of the table
    var cpt=0;
    $("#table1 thead tr").each(function(){
        if(cpt==0){//For the first row we want just to add the last column
            $(this).append($("#table2 thead tr:first td:last"));
        }else{//However in the second row we add all the columns
            $(this).append($("#table2 thead tr:last ").html());
        }
        cpt++;
    });

    1. Mergin the Body 我们可以看到body包含两种tr：

      • 第一个由两个第一行组成，其中包含内容
      • 第二个由仅包含内容的一个第一行组成 我认为那些列，所以我使用slice()函数来避免选择主题：

      CPT = 0;     $（“＃table1 tbody tr”）。each（function（i，el）{

          var lines=$("#table2 tbody ").find("tr:nth-child("+(i+1)+")").find("td");
    if (i % 2 === 0) {
        var lines=$("#table2 tbody ").find("tr:nth-child("+(i+1)+")").find("td").slice( 2 );
        $(this).append(lines);
    }else {
        var lines=$("#table2 tbody ").find("tr:nth-child("+(i+1)+")").find("td").slice(1);
        $(this).append(lines);
    }
});

      2. 最后，我邀请您查看以下代码段，看看我的解决方案是否符合您发布问题时的预期：

      $(function(){

        //Merging the header of the table
        var cpt=0;
        $("#table1 thead tr").each(function(){
            if(cpt==0){//For the first row we want just to add the last column
                $(this).append($("#table2 thead tr:first td:last"));
            }else{//However in the second row we add all the columns
                $(this).append($("#table2 thead tr:last ").html());
            }
            cpt++;
        });

        //Merging the body of the table
        cpt=0;
        $("#table1 tbody tr").each(function(i, el){


            var lines=$("#table2 tbody ").find("tr:nth-child("+(i+1)+")").find("td");
            if (i % 2 === 0) {
                var lines=$("#table2 tbody ").find("tr:nth-child("+(i+1)+")").find("td").slice( 2 );
                $(this).append(lines);
            }else {
                var lines=$("#table2 tbody ").find("tr:nth-child("+(i+1)+")").find("td").slice(1);
                $(this).append(lines);
            }
        });
        
           })
      <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%" id="table1"   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>
                </tr>
                <tr>
                    <td>TP s/d Bulan Lalu</td>
                    <td>TP Bulan ini</td>
                    <td>TP s/d Bulan ini</td>

                </tr>
                </thead>
                <tbody>
                <tr>
                    <td rowspan="2">01</td>
                    <td>Kejadian</td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>Rp</td>
                    <td></td>
                    <td></td>
                    <td></td>

                </tr>
                <tr>
                    <td rowspan="2">05</td>
                    <td>Kejadian</td>
                    <td ></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>Rp</td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td rowspan="2">02</td>
                    <td>Kejadian</td>
                    <td ></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>Rp</td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td rowspan="2">03</td>
                    <td>Kejadian</td>
                    <td ></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>Rp</td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td rowspan="2">04</td>
                    <td>Kejadian</td>
                    <td ></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>Rp</td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="form-group">
    <div class="row">
        <div class="col-md-12">
            <table width="100%" id="table2" 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>
                </tr>
                <tr>
                    <td>TP s/d Bulan Lalu</td>
                    <td>TP Bulan ini</td>
                    <td>TP s/d Bulan ini</td>

                </tr>
                </thead>

                <tbody>
                <tr>
                    <td rowspan="2">01</td>
                    <td>Kejadian</td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>

                <tr>
                    <td>Rp</td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>

                <tr>
                    <td rowspan="2">05</td>
                    <td>Kejadian</td>
                    <td ></td>
                    <td></td>
                    <td></td>
                </tr>

                <tr>
                    <td>Rp</td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>

                <tr>
                    <td rowspan="2">02</td>
                    <td>Kejadian</td>
                    <td ></td>
                    <td></td>
                    <td></td>
                </tr>

                <tr>
                    <td>Rp</td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>

                <tr>
                    <td rowspan="2">03</td>
                    <td>Kejadian</td>
                    <td ></td>
                    <td></td>
                    <td></td>
                </tr>

                <tr>
                    <td>Rp</td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>

                <tr>
                    <td rowspan="2">04</td>
                    <td>Kejadian</td>
                    <td ></td>
                    <td></td>
                    <td></td>
                </tr>

                <tr>
                    <td>Rp</td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>

                </tbody>
            </table>
        </div>
    </div>
</div>

相关问题
最新问题