如何使用 JQuery 或 JavaScript 在 HTML 中的多個表之間添加表？

Question

如何在任意兩個表格之間添加表格，目前我可以在 append 模式下添加表格，即在末尾添加表格，即<div id="main-div"> ！ 因此，如果用戶單擊該按鈕表，則<tfoot>中的基表中有一個按鈕在add table here ，應在單擊表按鈕的表之后添加表。

例如：

我已經創建了 5 個表，我想在第 3 個表之后再添加一個表，所以如果我單擊在add table here按鈕，那么應該在第 4 個 position 而不是最后添加表。

任何建議？任何解決方案

 var filterTableNum = 0; $('.add-table').click(add_empty_table); function add_empty_table() { const originTable = document.getElementById('source-table'); let newTable = originTable.cloneNode(true); newTable.id = 'source' + ++filterTableNum; newTable.querySelectorAll('input').forEach((element) => { element.value = ''; }); $(newTable).find('.component-id').val(newTable.id); $('#main-div').append(newTable); } function add_table_between(){ }

 #container>table{ display:none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="add-table"> Add Table </button> <div id="container"> <table id="source-table" data-component-type="Source" class="component-base table table-responsive table-striped rounded" > <thead class="thead-dark"> <tr> <th colspan="6" class="text-center"> <span>Source: </span ><input id="id" type="text" name="id" placeholder="id" class="component-id form-control-head" /> <button class="delete-component btn btn-danger" style="margin: 1%;" > Delete Table </button> </th> </tr> <tr> <th scope="row">Type</th> <th scope="row">Name</th> </tr> </thead> <tbody> <tr> <td> <input id="type" type="text" name="type" class="form-control" placeholder="Type" /> </td> <td> <input id="Name" type="text" name="name" class="form-control" placeholder="Name" /> </td> </tr> </tbody> <tfoot> <tr> <td> <button class="btwn-table">Add Table Here</button> </td> </tr> </table> <div class="main-div" id="main-div"></div>

JS小提琴： https://jsfiddle.net/shreekantbatale2/krnpfw36/1/

Answer 1

您可以使用 jQuery insertAfter來執行此操作。 此外，您需要在document上設置事件，因為按鈕在初始化時不存在，而是動態創建的。

 var filterTableNum = 0; $('.add-table').click(add_empty_table); $(document).on('click', '.btwn-table', add_table_between); function create_table() { const originTable = document.getElementById('source-table'); let newTable = originTable.cloneNode(true); newTable.id = 'source' + ++filterTableNum; newTable.querySelectorAll('input').forEach((element) => { element.value = ''; }); $(newTable).find('.component-id').val(newTable.id); return $(newTable); } function add_empty_table() { let newTable = create_table(); $('#main-div').append(newTable); } function add_table_between(e){ let newTable = create_table(); let originTable = $(e.target.closest('table')); newTable.insertAfter(originTable); }

 #container>table{ display:none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="add-table"> Add Table </button> <div id="container"> <table id="source-table" data-component-type="Source" class="component-base table table-responsive table-striped rounded" > <thead class="thead-dark"> <tr> <th colspan="6" class="text-center"> <span>Source: </span ><input id="id" type="text" name="id" placeholder="id" class="component-id form-control-head" /> <button class="delete-component btn btn-danger" style="margin: 1%;" > Delete Table </button> </th> </tr> <tr> <th scope="row">Type</th> <th scope="row">Name</th> </tr> </thead> <tbody> <tr> <td> <input id="type" type="text" name="type" class="form-control" placeholder="Type" /> </td> <td> <input id="Name" type="text" name="name" class="form-control" placeholder="Name" /> </td> </tr> </tbody> <tfoot> <tr> <td> <button class="btwn-table">Add Table Here</button> </td> </tr> </table> <div class="main-div" id="main-div"></div>