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

Question

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

除了 table 中的数据外，我还需要 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>[=12=].50</td>
        <td>18</td>
        
      </tr>
      <tr>
        <td>Bread</td>
        <td>.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>.75</td>
        <td>11</td>
        <th><input type="button" value="Del"  onClick="onDelete(this)"></th>
      </tr>
      <tr>
        <td>Oranges</td>
        <td>.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>

Answer 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>[=11=].50</td>
        <td>18</td>
        
      </tr>
      <tr>
        <td>Bread</td>
        <td>.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>.75</td>
        <td>11</td>
        <th><input type="button" value="Del"  onClick="onDelete(this)"></th>
      </tr>
      <tr>
        <td>Oranges</td>
        <td>.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>

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

How to copy rows from one table to another, including a new column

jquery

html-table