Скопируйте ВСЕ строки из одной таблицы HTML и добавьте в другую таблицу - PullRequest
Новая
       1

Скопируйте ВСЕ строки из одной таблицы HTML и добавьте в другую таблицу

2 голосов
/ 02 марта 2020

Я довольно долго искал подобное решение, но продолжаю находить, как перенести только одну строку из одной таблицы в другую, а не добавлять ВСЕ строки в таблицу 2 из таблицы 1 (и затем очищать строки из таблицы 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>

Как вы можете видеть, мой код работает только для первых двух передач строк - одна влево и одна справа - и затем он не работает при попытке в третий раз. Также - и это важно - я знаю, что должен быть намного более простой и более ортодоксальный способ сделать это, например, с помощью встроенных JavaScript методов, а не того, что я делаю; Я просто не могу ничего найти по этому поводу.

Ответы [ 4 ]

2 голосов
/ 02 марта 2020

Похоже, что вы добавляли к другой таблице, что означает, что в конечном итоге у tbody не будет строк, поэтому он не работает после 2-го раза.

Для очистки немного, вы можете просто иметь 1 функцию, которая делает это для любого идентификатора 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>
1 голос
/ 02 марта 2020

Этот код отлично работает. 

    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>
0 голосов
/ 03 марта 2020

Предыдущие ответы лучше, чем этот, но я нашел неортодоксальный, но успешный обходной путь для моей проблемы, который отражает код в моем вопросе. Я добавил невидимую строку после удаления всех строк в tbody, чтобы можно было заставить DOM думать, что 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>

Надеюсь, это поможет кому-нибудь в будущем.

0 голосов
/ 02 марта 2020

Нет необходимости перебирать все строки. Просто добавьте все содержимое ваших таблиц: 

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

Редактировать: это будет работать с простой структурой, которую вы представили. В случае, если в одной из таблиц, которые вы использовали, было несколько тел, вам нужно было бы перебрать их.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...