如何将 Row 添加到动态 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">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 />元素没有结束标记。