Импортировать значения из строк одной таблицы в заголовок другой таблицы

Question

Я хочу импортировать значения из строки одной таблицы в заголовок другой таблицы. Проблема в том, что мой код копирует выбранную строку в div, где присутствует таблица 2.

Кроме того, в строке есть поле 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, вместо этого вы должны добавить клонированную строку в thead, а затем добавить эту thead в table. Также я заменил клонированная строка td с th и добавленная 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>