亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何將 Row 添加到動態 html 表中?

如何將 Row 添加到動態 html 表中?

慕容708150 2022-07-21 10:09:34
我創建了一個不可見的 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/
查看完整描述

1 回答

?
哈士奇WWW

TA貢獻1799條經驗 獲得超6個贊

你已經完成了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 />元素沒有結束標記。


查看完整回答
反對 回復 2022-07-21
  • 1 回答
  • 0 關注
  • 150 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號