從一個表的行中導入值到另一個表的 header

Question

我想將一個表的一行中的值導入到另一個表的 header 中。 問題是我的代碼將選定的行復制到存在表 2 的 div 中。

此外，該行有一個input字段，我可以在其中輸入一個值。 它復制整個輸入字段，而不僅僅是值。 如何僅導入輸入字段的值？

 var table; $('#createPlist').click(function plrList() { count = Number($('#noofTiks').val()); caption = $('<caption>'); table = $('<table>'); table = $(table).css({ "border": "1px solid black" }); var thead = $('<thead>'); var htr = $('<tr>'); var tbody = $('<tbody>'); for (var a = 0; a < count; a++) { var row = $('<tr>'); for (var b = 0; b < 2; b++) { var td = $("<td>"); td = $(td).css({ "border": "1px solid black" }); if (b == 0) { var srNo = a + 1; td.append(srNo); } else { var input = $('<input>'); td.append(input); } row.append(td); } tbody.append(row); } var th = $('<th>'); th.append("Sr. No."); htr.append(th); th = $('<th>'); th.append("Player Name"); htr.append(th); thead.append(htr); table.append(thead); table.append(tbody); caption.append("Player List"); $('#pList').append(caption); $('#pList').append(table); }); $('#createPlist').on('click', function() { $(this).prop('disabled', true); }); $('#giveTik').click(function() { count = Number($('#noofTiks').val()); for (h = 0; h < count; h++) { var table = $('<table>'); table = $(table).css({ "border": "1px solid black", "margin": "20px auto", "width": "500px", "height": "250px" }) var thead = $('<thead>'); var tbody = $('<tbody>'); for (var i = 0; i < 3; i++) { // append new row to body var row = $('<tr>'); //var row = ''; for (var j = 0; j < 9; j++) { // append new td to row var td = $("<td>"); td = $(td).css({ "border": "1px solid black", }) td.append(""); row.append(td); } tbody.append(row); } var showTable = $('#pList').find('tr').eq(h + 1); //NEED HELP HERE console.log(showTable) // For "selected" row of table1.. var rowFromTable1 = showTable; //.. Take a clone/copy of it.. var clonedRowFromTable1 = rowFromTable1.clone(); //NEED HELP HERE //.. And append the cloned row to the thead of table2 $('#div').append(clonedRowFromTable1); // thead.append(h + 1); // table.append(thead); table.append(tbody); $('#div').append(table); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" id="noofTiks"> <div id="pList"></div> <button class="btn btn-error" id="createPlist">OK</button> <div id="div"></div> <button id="giveTik">CREATE TICKETS</button>

Answer 1

您當前的代碼將行附加到 div 因為您直接將克隆行附加到#div而不是您應該 append 克隆行到thead然后 append 這個thead到table 。另外我已經用th替換了克隆行td並添加了colspan 。

演示代碼：

 var table; $('#createPlist').click(function plrList() { count = Number($('#noofTiks').val()); caption = $('<caption>'); table = $('<table>'); table = $(table).css({ "border": "1px solid black" }); var thead = $('<thead>'); var htr = $('<tr>'); var tbody = $('<tbody>'); for (var a = 0; a < count; a++) { var row = $('<tr>'); for (var b = 0; b < 2; b++) { var td = $("<td>"); td = $(td).css({ "border": "1px solid black" }); if (b == 0) { var srNo = a + 1; td.append(srNo); } else { var input = $('<input>'); td.append(input); } row.append(td); } tbody.append(row); } var th = $('<th>'); th.append("Sr. No."); htr.append(th); th = $('<th>'); th.append("Player Name"); htr.append(th); thead.append(htr); table.append(thead); table.append(tbody); caption.append("Player List"); $('#pList').append(caption); $('#pList').append(table); }); $('#createPlist').on('click', function() { $(this).prop('disabled', true); }); $('#giveTik').click(function() { count = Number($('#noofTiks').val()); for (h = 0; h < count; h++) { var table = $('<table>'); table = $(table).css({ "border": "1px solid black", "margin": "20px auto", "width": "500px", "height": "250px" }) var thead = $('<thead>'); var tbody = $('<tbody>'); for (var i = 0; i < 3; i++) { // append new row to body var row = $('<tr>'); //var row = ''; for (var j = 0; j < 9; j++) { // append new td to row var td = $("<td>"); td = $(td).css({ "border": "1px solid black", }) td.append(""); row.append(td); } tbody.append(row); } var showTable = $('#pList').find('tr').eq(h + 1); //NEED HELP HERE // For "selected" row of table1.. var rowFromTable1 = showTable; //.. Take a clone/copy of it.. var clonedRowFromTable1 = rowFromTable1.clone(); //finding input value var input_value = clonedRowFromTable1.find("input").val(); //getting sr.no var texts = clonedRowFromTable1.find("td:first").text(); //replace td with th and add sr.no and input value clonedRowFromTable1.find("td:first").replaceWith("<th colspan='9'>" + texts + " " + input_value + "</th>") clonedRowFromTable1.find("td:last").remove()//remove next td //append cloned elemnt to thead thead.append(clonedRowFromTable1); table.append(thead)//append to table table.append(tbody); $('#div').append(table); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" id="noofTiks"> <div id="pList"></div> <button class="btn btn-error" id="createPlist">OK</button> <div id="div"></div> <button id="giveTik">CREATE TICKETS</button>