从一个表的行中导入值到另一个表的 header

Question

I want to import values from a row of one table to the header of another table. The issue is that my code copies the selected row to a div where table 2 is present.

Also, the row has an input field in which I can enter a value. It copies the input field as a whole and not just the value. How can I import only the value of the input field?

 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

Your current code was appending row to div because you where directly appending the clone row to #div instead you should append the cloned row to thead and then append this thead to table .Also i have replace cloned row td with th and added colspan .

Demo Code :

 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>