根据某些条件将一个表的最后一列复制到另一个表

时间:2015-06-22 09:35:45

标签: jquery html

我有两张桌子。我想取table3的最后一列并输入table4

例如: - table3

Names          Process_id   total
construction    1           1111
construction_1  1           0000
engineering     1           2222
permitting      1           3333

例如: - table4

Names           Process_id   
construction    1005         
engineering     1005         
permitting      1005  

table4输出的最终结果将是这些。

table4结果: -

Names           Process_id   Total_col
construction    1005         1111
engineering     1005         2222
permitting      1005         3333

逻辑: - 在表3中,如果process_id = 1,则总列值移动到table4。 基于table3.Names = table4.Names总列单元格值复制到table4

I tried something here

请帮帮我这些

谢谢

3 个答案:

答案 0 :(得分:0)

编辑:修改了代码,仅在process_id == 1时存储临时行。另外,将列从process_id重命名为total

检查我的代码段。如果循环遍历每一行并将数据存储在临时对象中,则可以执行此操作。

//create a temporary table to store data from table3
var mytable = {};


//loop through each row of table3
$('#table3 tr').each(function() {
  //store the name in the first cell of each row
  var name = $(this).find('td:first').html();
  
  //read the process_id of the current row (second cell)
  var process_id = $(this).find('td:nth-child(2)').html();


  //store the total from the last column of each row
  var total = $(this).find('td:last').html();

  //only save these values if the process_id == 1
  if (process_id==1) {
    mytable[name] = total;
  }
  

});

//add a column in table4 to represent data from table3
$('#table4 th:last').after('<th>from table3</th>');


//loop through each row of table4
$('#table4 tr').each(function() {
  //read the name from table4 to check if it is existing in our temp table.
  var name = $(this).find('td:first').html();

  if (mytable[name]) { //does our temp. table contain a value for the name we read?
    //if yes, then append its value after the last column of the current row
    $(this).append('<td>' + mytable[name] + '</td>');
  }
});
table,
td,
th {
  border-collapse: collapse;
  border: 1px solid grey;
  padding: 4px;
  font-family: Calibri, Tahoma;
  font-size: 12px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="table3">
  <table>
    <thead>
      <tr>
        <th>Names</th>
        <th>Process_id</th>
        <th>total</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>construction</td>
        <td>1</td>
        <td>1111</td>
      </tr>
      <tr>
        <td>construction_1</td>
        <td>1</td>
        <td>0000</td>
      </tr>
      <tr>
        <td>engineering</td>
        <td>1</td>
        <td>2222</td>
      </tr>
      <tr>
        <td>permitting</td>
        <td>1</td>
        <td>3333</td>
      </tr>


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

<br>
<br>

<div id="table4">
  <table>
    <thead>
      <tr>
        <th>Names</th>
        <th>Process_id</th>

    </thead>

    <tbody>
      <tr>
        <td>construction</td>
        <td>1005</td>
      </tr>
      <tr>
        <td>engineering</td>
        <td>1005</td>
      </tr>
      <tr>
        <td>permitting</td>
        <td>1005</td>
      </tr>
    </tbody>
  </table>
  <div>
    <div id='result'></div>

答案 1 :(得分:0)

我已经分道扬道了。请查看此jsFiddle

可以通过2个简单步骤thead和tbody将列从一个表移动/复制到另一个表。请检查逻辑。

function copyCols() {

    var processIdArr = ['1','2'];

    // clear last col before add
    $('.lastcol').remove();

    // copy table head
    var val = $('#testTable1 thead tr').find('th:last-child').html();
    $('#testTable2 thead tr').find('th:last-child').after('<th class="lastcol">' + val + '</th>');

    // copy table body
    $('#testTable1 tbody tr').find('td:last-child').each(function(index){

        var processId = $(this).parent('tr').find('td:nth-child(2)').text();
        if( $.inArray(processId, processIdArr) >= 0 ) {

             var val = $(this).html();
             $('#testTable2 tbody tr').find('td:last-child').eq(index).after('<td class="lastcol">'+val+'</td>');

        }
   });

}

编辑:使用逻辑更新了jsfiddle以检查进程ID。您还可以检查需要复制/移动的进程ID列表/数组。例如

var processIdArr = ['1','2'];

PS:这里第二个表没有检查要与第一个表中的列匹配的列。因此,列逐行附加。

答案 2 :(得分:0)

我根据您的要求修改了您的代码。请检查一次。

 rowCount = $('#table3 tr:last').index() + 1;
 table4rowCount = $('#table3 tr:last').index() + 1;
row = rowCount + 1;
var pivot_1 = 1001;
var loop = 0



$("#table4 tr:eq(0)").find("th:last").after("<th>Total_col</th>");
for(i=1;i<row; i++)
{

    var d     = $('#table3 tr:eq(' + i + ')').find("td:eq(1)").text();
    alert(d);

  for(j=1;j<table4rowCount; j++)
{

        var one_1 = $('#table3 tr:eq(' + i + ')').find("td:eq(0)").text();
        var one_2 = $('#table4 tr:eq(' + j+ ')').find("td:eq(0)").text();

       if( d == '1'  && one_1 == one_2)
       {  
           alert(one_1 + " " + one_2);
           //alert("hi");
           var c = $('#table3 tr:eq(' + i + ')').find("td:last").text();
           alert(c);
   $('#table4 tr:eq(' + j + ')').find("td:last").after('<td style="text-align: right;">'+ c +'</td>');
         }
}
}

我认为这些代码对您有用。 谢谢。