代码之家 › 专栏 › 技术社区 › Max Voisard

从一个HTML表复制所有行并附加到另一个表

jquery javascript

Max Voisard · 技术社区 · 6 年前

我一直在寻找这样的解决方案,但我一直在寻找如何从一个表到另一个表只传输一行,而不是将表1中的所有行追加到表2(然后从表1中清除行,这很容易)。到目前为止,我一直在尝试:

function TransferRowsRight() {
   var t1 = document.getElementById("t1");
   const length = t1.rows.length;
   for (var index = 0; index < length; index++) {
      var rowHTML = $('#table1 tbody tr:first').html();
      $('#table2 tr:last').after("<tr>" + rowHTML + "</tr>");
      t1.deleteRow(0);
   }
}

function TransferRowsLeft() {
   var t2 = document.getElementById("t2");
   const length = t2.rows.length;
   for (var index = 0; index < length; index++) {
      var rowHTML = $('#table2 tbody tr:first').html();
      $('#table1 tr:last').after("<tr>" + rowHTML + "</tr>");
      t2.deleteRow(0);
   }
}

<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>Food</th>
         <th>Cost</th>
         <th>Quantity</th>
      </tr>
    <tbody id="t1">
      <tr>
        <td>Apple</td>
        <td>$0.50</td>
        <td>18</td>
      </tr>
      <tr>
        <td>Bread</td>
        <td>$1.99</td>
        <td>7</td>
      </tr>
      <tr>
        <td>Salmon</td>
        <td>$7.99</td>
        <td>5</td>
      </tr>
    </tbody>
  </table>

  <table id="table2" border="1" style="margin-left: 2%">
    <thead>
      <tr>
        <th>Food</th>
        <th>Cost</th>
        <th>Quantity</th>
      </tr>
    </thead>
    <tbody id="t2">
      <tr>
        <td>Broccoli</td>
        <td>$3.75</td>
        <td>11</td>
      </tr>
      <tr>
        <td>Oranges</td>
        <td>$6.50</td>
        <td>8</td>
      </tr>
      <tr>
        <td>Chicken</td>
        <td>$6.25</td>
        <td>12</td>
      </tr>
    </tbody>
  </table>
  <div style="align-self: center">
     <button onclick="TransferRowsLeft()" style="margin-left: 2%">Transfer Rows Left</button>
     <button onclick="TransferRowsRight()" style="margin-left: 2%">Transfer Rows Right</button>
  </div>
</div>

如您所见,我的代码只在前两次传输行(一左一右)时起作用,而在第三次尝试时则不起作用。 阿尔索

2 回复 | 直到 6 年前

Alex - Tin Le 6 年前

这个代码工作正常。

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

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

    <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>Food</th>
             <th>Cost</th>
             <th>Quantity</th>
          </tr>
        <tbody id="t1">
          <tr>
            <td>Apple</td>
            <td>$0.50</td>
            <td>18</td>
          </tr>
          <tr>
            <td>Bread</td>
            <td>$1.99</td>
            <td>7</td>
          </tr>
          <tr>
            <td>Salmon</td>
            <td>$7.99</td>
            <td>5</td>
          </tr>
        </tbody>
      </table>

      <table id="table2" border="1" style="margin-left: 2%">
        <thead>
          <tr>
            <th>Food</th>
            <th>Cost</th>
            <th>Quantity</th>
          </tr>
        </thead>
        <tbody id="t2">
          <tr>
            <td>Broccoli</td>
            <td>$3.75</td>
            <td>11</td>
          </tr>
          <tr>
            <td>Oranges</td>
            <td>$6.50</td>
            <td>8</td>
          </tr>
          <tr>
            <td>Chicken</td>
            <td>$6.25</td>
            <td>12</td>
          </tr>
        </tbody>
      </table>
      <div style="align-self: center">
         <button onclick="TransferRowsLeft()" style="margin-left: 2%">Transfer Rows Left</button>
         <button onclick="TransferRowsRight()" style="margin-left: 2%">Transfer Rows Right</button>
      </div>
    </div>

Andrew Lohr 6 年前

要清理一点,你可以有一个函数来处理任何一个tbody的ID,一个用于源tbody,一个用于目标tbody。

使用JQuerys .each .append ,和 .empty 会完成任务的。

function TransferRows(src, dest) {
  $(`#${src} tr`).each((index, row) => {
    $(`#${dest}`).append(row);
  });
  
  $(`#${src}`).empty();
}

<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>Food</th>
        <th>Cost</th>
        <th>Quantity</th>
      </tr>
      <tbody id="t1">
        <tr>
          <td>Apple</td>
          <td>$0.50</td>
          <td>18</td>
        </tr>
        <tr>
          <td>Bread</td>
          <td>$1.99</td>
          <td>7</td>
        </tr>
        <tr>
          <td>Salmon</td>
          <td>$7.99</td>
          <td>5</td>
        </tr>
      </tbody>
  </table>

  <table id="table2" border="1" style="margin-left: 2%">
    <thead>
      <tr>
        <th>Food</th>
        <th>Cost</th>
        <th>Quantity</th>
      </tr>
    </thead>
    <tbody id="t2">
      <tr>
        <td>Broccoli</td>
        <td>$3.75</td>
        <td>11</td>
      </tr>
      <tr>
        <td>Oranges</td>
        <td>$6.50</td>
        <td>8</td>
      </tr>
      <tr>
        <td>Chicken</td>
        <td>$6.25</td>
        <td>12</td>
      </tr>
    </tbody>
  </table>
  <div style="align-self: center">
    <button onclick="TransferRows('t2', 't1')" style="margin-left: 2%">Transfer Rows Left</button>
    <button onclick="TransferRows('t1','t2')" style="margin-left: 2%">Transfer Rows Right</button>
  </div>
</div>

El_Vanja 6 年前

const t1 = document.getElementById("t1");
const t2 = document.getElementById("t2");
// swap t1 and t2 for other direction
t1.innerHTML += t2.innerHTML;
t2.innerHTML = '';

编辑:这将工作的简单结构你已经提出。如果您使用的一个表有多个tbode,则必须遍历它们。

Max Voisard 6 年前

tbody 这样我就可以诱使他想 表格主体 不是空的:

function TransferRowsRight() {
   var t1 = document.getElementById("t1");
   const length = t1.rows.length;
   for (var index = 0; index < length; index++) {
      var rowHTML = $('#table1 tbody tr:first').html();
      $('#table2 tr:last').after("<tr>" + rowHTML + "</tr>");
      t1.deleteRow(0);
   }
   $(".invisible").remove();
   var invisibleRow = document.createElement('tr');
   invisibleRow.style = "display: none";
   invisibleRow.className = "invisible";
   $('#table1 > tbody:last-child').append(invisibleRow);
}

function TransferRowsLeft() {
   var t2 = document.getElementById("t2");
   const length = t2.rows.length;
   for (var index = 0; index < length; index++) {
      var rowHTML = $('#table2 tbody tr:first').html();
      $('#table1 tr:last').after("<tr>" + rowHTML + "</tr>");
      t2.deleteRow(0);
   }
   $(".invisible").remove();
   var invisibleRow = document.createElement('tr');
   invisibleRow.style = "display: none";
   invisibleRow.className = "invisible";
   $('#table2 > tbody:last-child').append(invisibleRow);
}

<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>Food</th>
         <th>Cost</th>
         <th>Quantity</th>
      </tr>
    <tbody id="t1">
      <tr>
        <td>Apple</td>
        <td>$0.50</td>
        <td>18</td>
      </tr>
      <tr>
        <td>Bread</td>
        <td>$1.99</td>
        <td>7</td>
      </tr>
      <tr>
        <td>Salmon</td>
        <td>$7.99</td>
        <td>5</td>
      </tr>
    </tbody>
  </table>

  <table id="table2" border="1" style="margin-left: 2%">
    <thead>
      <tr>
        <th>Food</th>
        <th>Cost</th>
        <th>Quantity</th>
      </tr>
    </thead>
    <tbody id="t2">
      <tr>
        <td>Broccoli</td>
        <td>$3.75</td>
        <td>11</td>
      </tr>
      <tr>
        <td>Oranges</td>
        <td>$6.50</td>
        <td>8</td>
      </tr>
      <tr>
        <td>Chicken</td>
        <td>$6.25</td>
        <td>12</td>
      </tr>
    </tbody>
  </table>
  <div style="align-self: center">
     <button onclick="TransferRowsLeft()" style="margin-left: 2%">Transfer Rows Left</button>
     <button onclick="TransferRowsRight()" style="margin-left: 2%">Transfer Rows Right</button>
  </div>
</div>