如何将行添加到动态html表中？

Question

我创建了一个不可见的div，在该div主表中是隐藏的，我正在将该表克隆到另一个div中。那个div id is main-div.我想在该新生成的表中添加一行吗？如何使用jQuery追加行？生成表函数，删除表函数和删除行函数处于工作状态。使用javascript或jQuery添加新行哪种更好的处理方式？有什么提示吗？

// ==================== //
// Add aggregate Table//
// ==================== //

var aggTableNum = 0;
$('.addAggregatorCompo').click(function (e) {
  const originTable = document.getElementById('aggregator-table');
  let newTable = originTable.cloneNode(true);
  newTable.id = 'newAggTable' + ++aggTableNum;
  newTable.querySelectorAll('input').forEach((element) => {
    element.value = '';
  });
  $('#main-div').append(newTable);
});

// ==================== //
// Delete Component //
// ==================== //

$('#main-div').on('click', '.delete-component', function (e) {
  e.preventDefault(); // in case it is not a type=button and the table is wrapped in a form
  this.closest('table').remove();
});

// ==================== //
// Delete Records//
// ==================== //

$('#main-div').on('click', '.delete-record', function () {
  $('table tbody')
    .find('input[name="record"]')
    .each(function () {
      if ($(this).is(':checked')) {
        $(this).parents('tr').remove();
      }
    });
});

// ==================== //
// Add Aggregate records //
// ==================== //

$('#main-div').on('click', '.add-record', function () {
  $('<tr>')
    .append($('<td>').append('input'))
    .append($('<td>').append('text2'))
    .append($('<td>').append('text3'))
    .append($('<td>').append('text4'));
});

#aggregator-table {
  display: none;
}

table {
  border-collapse: collapse;
  margin: 1em;
}
thead {
  background-color: lightblue;
}
td,
th {
  border: solid grey 1px;
  padding: 1em;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button style="margin: 1%" class="addAggregatorCompo">Add Table</button>
<table id="aggregator-table" class="component-base">
        <thead>
          
        <th colspan="6">Aggregator</th>
    
        <tr>
          <th> Select</th>
          <th> Column 1 </th>
          <th> Column 2 </th>
          <th> Column 3 </th>
          <th> Column 4 </th>
      
        </tr>
        </thead>
        <tbody>
        <tr>
      <td><input type="checkbox" name="record"></td>
          <td>
            <input id='column1'>
            </input>
          </td>
          <td><input id="column2">
            </input></td>
          <td>
            <input id="column3">
            </input>
          </td>
            <td>
              <input id="4">
              </input>
            </td>
        </tr>
        <tr>
          <td>
        
        <button style="margin: 1%" class="add-record">add Record</button>
        
        </td>
        <td>
          <button class="delete-component" style="margin: 1%">Delete Table </button>
        </td>
        <td>
          <button class="delete-record" style="margin: 1%">Delete Record </button>
        </td>
      </tr>
      </tbody>
      </table>
      <div class="generate-div" id="main-div"></div>

jsFiddle-> https://jsfiddle.net/shreekantbatale2/h2sv1q9p/

Answer 1

您已经完成了在内存中创建新的tr的工作。您需要做的就是将其添加到DOM中。可以使用appendTo()：

实现

$('#main-div').on('click', '.add-record', function() {
  let $tbody = $(this).closest('tbody');
  $('<tr>')
    .append($('<td>').append('input'))
    .append($('<td>').append('text2'))
    .append($('<td>').append('text3'))
    .append($('<td>').append('text4'))
    .appendTo($tbody);
});

// ==================== //
// Add aggregate Table//
// ==================== //

var aggTableNum = 0;
$('.addAggregatorCompo').click(function(e) {
  const originTable = document.getElementById('aggregator-table');
  let newTable = originTable.cloneNode(true);
  newTable.id = 'newAggTable' + ++aggTableNum;
  newTable.querySelectorAll('input').forEach((element) => {
    element.value = '';
  });
  $('#main-div').append(newTable);
});

// ==================== //
// Delete Component //
// ==================== //

$('#main-div').on('click', '.delete-component', function(e) {
  e.preventDefault(); // in case it is not a type=button and the table is wrapped in a form
  this.closest('table').remove();
});

// ==================== //
// Delete Records//
// ==================== //

$('#main-div').on('click', '.delete-record', function() {
  $('table tbody')
    .find('input[name="record"]')
    .each(function() {
      if ($(this).is(':checked')) {
        $(this).parents('tr').remove();
      }
    });
});

// ==================== //
// Add Aggregate records //
// ==================== //

$('#main-div').on('click', '.add-record', function() {
  let $tbody = $(this).closest('table').find('tbody');
  $('<tr>')
    .append($('<td>').append('input'))
    .append($('<td>').append('text2'))
    .append($('<td>').append('text3'))
    .append($('<td>').append('text4'))
    .appendTo($tbody);
});

#aggregator-table {
  display: none;
}

table {
  border-collapse: collapse;
  margin: 1em;
}

thead {
  background-color: lightblue;
}

td,
th {
  border: solid grey 1px;
  padding: 1em;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button style="margin: 1%" class="addAggregatorCompo">Add Table</button>
<table id="aggregator-table" class="component-base">
  <thead>
    <th colspan="6">Aggregator</th>
    <tr>
      <th>Select</th>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" name="record"></td>
      <td><input id="column1" /></td>
      <td><input id="column2" /></td>
      <td><input id="column3" /></td>
      <td><input id="4" /></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>
        <button style="margin: 1%" class="add-record">add Properties</button>
      </td>
      <td>
        <button class="delete-component" style="margin: 1%">Delete Table </button>
      </td>
      <td>
        <button class="delete-record" style="margin: 1%">Delete Record </button>
      </td>
    </tr>
  </tfoot>
</table>
<div class="generate-div" id="main-div"></div>

还请注意HTML中的<input />元素没有结束标记。