如何将行从一个表复制到另一个表，包括新列答案

【问题标题】：How to copy rows from one table to another, including a new column如何将行从一个表复制到另一个表，包括新列
【发布时间】：2021-08-09 01:28:46
【问题描述】：

我在Jquery中设置了这个功能，将数据从一个表复制到另一个，但我无法包含一个新列，其中将有一个按钮可以删除该行，

我需要copy_Table()函数，当从table1复制数据并粘贴到table2中时，除了表中的数据外，还需要包含一个带有删除按钮的新列

function copy_Table() {
       $('#t2').append($('#t1').html());

    }


    function filterTable1() {
  const query = q => document.querySelectorAll(q);
  const filters = [...query('th input.input1')].map(e => new RegExp(e.value, 'i'));

  query('tbody.Enc_Despesas1 tr').forEach(row => row.style.display = 
    filters.every((f, i) => f.test(row.cells[i].textContent)) ? '' : 'none');
}

function onDelete(td) {

row = td.parentElement.parentElement;
document.getElementById("table2").deleteRow(row.rowIndex);

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="display: flex; flex-direction: row">
  <table id="table1" border="1">
    <thead>
      <tr>
        <th><input onkeyup="filterTable1()" class="input1" name="form_txt"></th>
        <th><input onkeyup="filterTable1()" class="input1" name="form_txt"></th>
        <th><input onkeyup="filterTable1()" class="input1" name="form_txt"></th>   
      </tr>
      <tr>
         <th>Food</th>
         <th>Cost</th>
         <th>Quantity</th>
         
      </tr>
    <tbody id="t1" class="Enc_Despesas1">
      <tr>
        <td>Apple</td>
        <td>$0.50</td>
        <td>18</td>
        
      </tr>
      <tr>
        <td>Bread</td>
        <td>$1.99</td>
        <td>7</td>
      </tr>
    </tbody>
  </table>

  <table id="table2" border="1" style="margin-left: 2%">
    <thead>
      <tr>
        <th>Food</th>
        <th>Cost</th>
        <th>Quantity</th>
        <th></th>
      </tr>
    </thead>
    <tbody id="t2">
      <tr>
        <td>Broccoli</td>
        <td>$3.75</td>
        <td>11</td>
        <th><input type="button" value="Del"  onClick="onDelete(this)"></th>
      </tr>
      <tr>
        <td>Oranges</td>
        <td>$6.50</td>
        <td>8</td>
        <th><input type="button" value="Del"  onClick="onDelete(this)"></th>
      </tr>
    </tbody>
  </table>
  <div style="align-self: center">
     <button onclick="copy_Table()" style="margin-left: 2%">Transfer Rows</button>
  </div>
</div>

【问题讨论】：

标签： jquery html-table

【解决方案1】：

您可以使用替换功能找到每一行的结束标记并插入包含删除按钮的代码

function copy_Table() {
let tableRows = $('#t1').html()
tableRows = tableRows.replaceAll(
  '</tr>',
  '<th><input type="button" value="Del" onClick="onDelete(this)" /></th></tr>'
)
       $('#t2').append(tableRows);

    }


    function filterTable1() {
  const query = q => document.querySelectorAll(q);
  const filters = [...query('th input.input1')].map(e => new RegExp(e.value, 'i'));

  query('tbody.Enc_Despesas1 tr').forEach(row => row.style.display = 
    filters.every((f, i) => f.test(row.cells[i].textContent)) ? '' : 'none');
}

function onDelete(td) {

row = td.parentElement.parentElement;
document.getElementById("table2").deleteRow(row.rowIndex);

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="display: flex; flex-direction: row">
  <table id="table1" border="1">
    <thead>
      <tr>
        <th><input onkeyup="filterTable1()" class="input1" name="form_txt"></th>
        <th><input onkeyup="filterTable1()" class="input1" name="form_txt"></th>
        <th><input onkeyup="filterTable1()" class="input1" name="form_txt"></th>   
      </tr>
      <tr>
         <th>Food</th>
         <th>Cost</th>
         <th>Quantity</th>
         
      </tr>
    <tbody id="t1" class="Enc_Despesas1">
      <tr>
        <td>Apple</td>
        <td>$0.50</td>
        <td>18</td>
        
      </tr>
      <tr>
        <td>Bread</td>
        <td>$1.99</td>
        <td>7</td>
      </tr>
    </tbody>
  </table>

  <table id="table2" border="1" style="margin-left: 2%">
    <thead>
      <tr>
        <th>Food</th>
        <th>Cost</th>
        <th>Quantity</th>
        <th></th>
      </tr>
    </thead>
    <tbody id="t2">
      <tr>
        <td>Broccoli</td>
        <td>$3.75</td>
        <td>11</td>
        <th><input type="button" value="Del"  onClick="onDelete(this)"></th>
      </tr>
      <tr>
        <td>Oranges</td>
        <td>$6.50</td>
        <td>8</td>
        <th><input type="button" value="Del"  onClick="onDelete(this)"></th>
      </tr>
    </tbody>
  </table>
  <div style="align-self: center">
     <button onclick="copy_Table()" style="margin-left: 2%">Transfer Rows</button>
  </div>
</div>

【讨论】：