I'm trying to use JavaScript to take something like this:
<div class="content">Fruit<br>
Apple: 100 - 250<br>
Orange: 90 - 190<br>
Pear: 140 - 230<br>
Melon: 1000 - 1280</div>
And put it into a table like this:
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
<table><tr><th>Fruit</th><th>Min</th><th>Max</th><th>Difference</th></tr><tr><td>Apple</td><td>100</td><td>250</td><td>150</td></tr><tr><td>Orange</td><td>90</td><td>190</td><td>100</td></tr><tr><td>Pear</td><td>140</td><td>230</td><td>90</td></tr><tr><td>Melon</td><td>1000</td><td>1280</td><td>280</td></tr></table>
I'm having trouble finding a place to start.
The following code creates a table based on the content from the div "content" when the user clicks the button.
(function(){
var content = document.getElementById("content");
var tresult = document.getElementById("tresult");
var btnCreateTable = document.getElementById("btnCreateTable");
//adds event listener to button
btnCreateTable.addEventListener('click',function(e){
//parse and create table
parseContent(content);
});
function parseContent(oCon){
var nodes = content.innerText;
var sNodes = nodes.split("\n");
var newTable = "";
var table = document.createElement('table');
//sColumns is used to def the columns for the table
var sColumns = [
"Fruit",
"Min",
"Max",
"Difference"
];
var table = document.createElement('table');
var tr = document.createElement('tr');
for(a = 0; a < sColumns.length; a++){
var th = document.createElement('th');
th.innerText = sColumns[a];
tr.appendChild(th);
}
table.appendChild(tr);
var oFruit = [],
oMin = [],
oMax = [],
oNumbers = [];
for(b = 1; b < sNodes.length; b++){
var sFruit = sNodes[b].split(":");
for(c = 0; c < sFruit.length; c++){
if(c % 2 === 0){
oFruit.push(sFruit[c]);
}else{
oNumbers.push(sFruit[c]);
}
}
}
for(var d = 0; d < oNumbers.length; d++){
var spNum = oNumbers[d].split("-");
oMin.push(spNum[0]);
oMax.push(spNum[1]);
}
for(var f = 0; f < sNodes.length - 1; f++){
var tr2 = document.createElement('tr');
var td = document.createElement('td');
td.innerText = oFruit[f];
tr2.appendChild(td);
td = document.createElement('td');
td.innerText = oMin[f];
tr2.appendChild(td);
td = document.createElement('td');
td.innerText = oMax[f];
tr2.appendChild(td);
td = document.createElement('td');
td.innerText = oMax[f] - oMin[f];
tr2.appendChild(td);
table.appendChild(tr2);
}
tresult.appendChild(table);
};
}());
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="content" class="content">Fruit<br>
Apple: 100 - 250<br>
Orange: 90 - 190<br>
Pear: 140 - 230<br>
Melon: 1000 - 1280
</div>
<div id="tresult"></div>
<button id="btnCreateTable">Create table</button>
</body>
</html>
This is too hard coded but you can use as a base.
var myControl = $('.content');
var inputData = myControl.text().split('\n');
$('.content').remove();
var table = "<table><tr><th>" + inputData[0] + "</th><th>Min</th><th>Max</th><th>Difference</th></tr>";
for (var i = 1; i < inputData.length; i++)
{
var cells = inputData[i].replace(': ', ' ').replace(' - ',' ').split(' ');
table += "<tr><th>"+cells[0]+"</th><th>"+cells[1]+"</th><th>"+ +cells[2] +"</th><th>"+ (parseInt(cells[2]) - parseInt(cells[1])) +"</th></tr>"
};
table+="</table>"
$("body").append(table);
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="content">Fruit<br>
Apple: 100 - 250<br>
Orange: 90 - 190<br>
Pear: 140 - 230<br>
Melon: 1000 - 1280</div>
Related
I have multiple arrays lets say:
var animals = ["cow","horse","rabbit","elephant","donkey","monkey","zebra"];
var food = ["apple","banana","pear","melon","grape","peach","pineapple"];
I want to put this in 4-column table dynamically. if click on animals picture the animals array would fill the table, if food, then food array would fill the table.
So, lets say I have
<table class="myTable"></table>
Then need javascript
import $ from "https://cdn.skypack.dev/jquery#3.6.1";
var animals = ["cow","horse","rabbit","elephant","donkey","monkey","zebra"];
var food = ["apple","banana","pear","melon","grape","peach","pineapple"];
var $table = $('.myTable');
for (var i = 0; i < food.length; i++){
var $aSingleContent = '<tr><td>'+food[i]+'</td></tr>';
$table.append($aSingleContent);
}
This would display all food items in 1 column. Now I need to divide this by 4 - because 4 columns in a row
because of <tr> in line var $aSingleContent = '<tr><td>'+food[i]+'</td></tr>'; makes your javascript create a new row for every element in array. we need to keep count the amount of data that had filled a row. if a row has 4 columns columnCount === 4, then we create a new row.
const food = ["apple","banana","pear","melon","grape","peach","pineapple"];
const $table = $('.myTable');
let $aSingleContent = "<tr>", columnCount = 0;
for (var i = 0; i < food.length; i++){
if(columnCount === 4) {
columnCount = 0;
$aSingleContent += '</tr><tr>';
}
$aSingleContent += '<td>'+food[i]+'</td>';
columnCount++;
}
$aSingleContent += "</tr>"
$table.append($aSingleContent);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="myTable" border></table>
You can try this:
window.onload = function() {
var animals = ["cow","horse","rabbit","elephant","donkey","monkey","zebra"];
var food = ["apple","banana","pear","melon","grape","peach","pineapple"];
var table = document.getElementById("table");
var i = 0, r = 0;
while(i < animals.length) {
var row = table.insertRow(r);
for (var c = 0; c < 4; c++) {
var cell = row.insertCell(c);
cell.appendChild(document.createTextNode(animals[i] ? animals[i] : ''));
i++;
}
r++;
}
document.body.appendChild(table);
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table" cellpadding="1" cellspacing="1">
</table>
Hope this help!
If you have food array more than you provide you can use this one.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.1.slim.min.js" integrity="sha256-w8CvhFs7iHNVUtnSP0YKEg00p9Ih13rlL9zGqvLdePA=" crossorigin="anonymous"></script>
</head>
<body>
<table class="myTable" border="1">
</table>
<script>
var animals = ["cow","horse","rabbit","elephant","donkey","monkey","zebra"];
var food = ["apple","banana","pear","melon","grape","peach","pineapple", "a","b","c","d"];
var $table = $('.myTable');
var $aSingleContent = '';
var to = 0;
var from = 3;
for (var i = 0; i < food.length; i++){
if (i==to)
{ $aSingleContent += '<tr>'; }
$aSingleContent += '<td>'+food[i]+'</td>';
if (i==from)
{
$aSingleContent += '</tr>';
to = to + 4;
from = from + 4;
}
}
$table.append($aSingleContent);
</script>
</body>
</html>
I'm making a program that generates 2 tables. First has 16 images that represent a menu or options that you can click and then by clicking it you select in. The second table is generated by inputting rows and cells. So the second table is by default blank and each cells is meant to by replaced by an image that you selected in the first table. I've managed to do everything but I don't completley understand how to do the selecting and setting the image. (I assume it has something to do with ids and then onclick()?)
stolpci = window.prompt("vpiši stevilo stolpcov:");
for (i2 = 0; i2 < 1;) {
if (stolpci < 11 || stolpci > 41) {
stolpci = window.prompt("Napačno število. Število mora biti večje od 10 in manjše od 40. Ponovno vpiši stevilo stolpcov:");
} else {
i2++;
}
}
vrstice = window.prompt("vpiši stevilo vrstic:");
for (i2 = 0; i2 < 1;) {
if (vrstice < 6 || vrstice > 11) {
vrstice = window.prompt("Napačno število. Število mora biti večje od 5 in manjše od 11. Ponovno vpiši stevilo vrstic:");
} else {
i2++;
}
}
function generateTable() {
const tbl = document.createElement("table");
const tblBody = document.createElement("tbody");
for (let i = 0; i < vrstice; i++) {
const row = document.createElement("tr");
row.id = i;
for (let j = 0; j < stolpci; j++) {
const cell = document.createElement("td");
const cellText = document.createTextNode(' ');
cell.appendChild(cellText);
row.appendChild(cell);
cell.id = j;
}
tblBody.appendChild(row);
}
tbl.appendChild(tblBody);
document.body.appendChild(tbl);
}
function options() {
const tbl = document.createElement("table");
const tblBody = document.createElement("tbody");
let nImage = 1;
for (let i = 0; i < 1; i++) {
const row = document.createElement("tr");
for (let j = 0; j < 16; j++) {
const cell = document.createElement("td");
const cellText = document.createTextNode("");
if (nImage > 16) {
nImage = 1;
}
cell.style.backgroundImage = "url('images/sprite" + nImage + ".gif')";
cell.id = nImage;
nImage++;
cell.appendChild(cellText);
row.appendChild(cell);
}
tblBody.appendChild(row);
}
tbl.appendChild(tblBody);
document.body.appendChild(tbl);
}
window.onload = () => {
options();
generateTable();
}
table {
border: 1px solid gray;
padding: 0px;
margin: 0px;
border-spacing: 0px;
}
td {
margin: 0px;
padding: 0px;
min-width: 32px;
max-width: 32px;
max-height: 32px;
min-height: 32px;
width: 32px;
height: 32px;
border: 1px solid gray;
background-color: silver;
}
You would need to add click events to each cell. When click you could have another object which you save the 'selected' data to i.e the cell data. You would then need a button which when clicked would move your 'selected' data to the cells in the other table.
Using a javascript function
function initializeUserTable(tableHeaders , tableData ) {
// I want to set table headers and table data
}
var tableHeaders = "ID,USERNAME,STATUS,LOGIN";
var tableData = "1,ABC,ACTIVE,N,2,DEF,INACTIVE,Y,3,XYZ,ACTIVE,Y";
want to set the tableHeaders as a header and data as a tableData, so the table looks like
I hope this is help you
var table = document.getElementsByTagName("table")[0];
var ths = ["ID","USERNAME","STATUS","LOGIN"];
var tds = [["1","ABC","ACTIVE","N"],["2","DEF","INACTIVE","Y"],["3","XYZ","ACTIVE","Y"]];
let tr = document.createElement("tr");
function initializeUserTable(tableHeaders , tableData ){
for(let i=0;i<ths.length;i++){
for(let j=0;j<tableHeaders.length;j++){
if(i==0){
let th = document.createElement("th");
th.innerHTML=tableHeaders[j];
if(j==0){
tr.appendChild(th);
}
tr.appendChild(th);
}
else{
let td = document.createElement("td");
td.innerHTML=tableData[i-1][j];
tr.appendChild(td);
}
}
table.insertAdjacentElement("beforeend",tr);
tr = document.createElement("tr");
}
}
initializeUserTable(ths,tds);
table{
border-collapse: collapse;
}
table,th, td {
border:2px solid black;
width:50%;
height:20px;
text-align: center;
}
th{
background: lightgray;
}
<!DOCTYPE html>
<html>
<head>
<title>tableData</title>
</head>
<body>
<table>
</table>
</body>
</html>
you can use :
yourstring.split(",") to transform your data as array
table.insertRow to insert new row in a table tag
row.insertCell to insert new cell in table tag
var tableHeaders = "ID,USERNAME,STATUS,LOGIN";
var tableData = "1,ABC,ACTIVE,N,2,DEF,INACTIVE,Y,3,XYZ,ACTIVE,Y";
function insertRow(table) {
if (!table.dataset.number) {
table.dataset.number = 0;
}
var rowNumber = parseInt(table.dataset.number);
table.dataset.number = rowNumber + 1;
return table.insertRow(rowNumber);
}
function insertCell(row) {
if (!row.dataset.number) {
row.dataset.number = 0;
}
var cellNumber = parseInt(row.dataset.number);
row.dataset.number = cellNumber + 1;
return row.insertCell(cellNumber);
}
function initializeUserTable(tableHeaders, tableData) {
var headers = tableHeaders.split(",");
var datas = tableData.split(",");
var table = document.getElementById('my-table');
var row = insertRow(table);
let cell;
headers.forEach(header => {
cell = insertCell(row);
cell.outerHTML = `<th>${header}</th>`;
});
row = insertRow(table);
datas.forEach(data => {
cell = insertCell(row);
cell.innerHTML = data;
if (parseInt(row.dataset.number) === headers.length) {
row = insertRow(table);
}
});
}
initializeUserTable(tableHeaders, tableData);
table,th, td {
border:1px solid #ddd;
padding:5px;
text-align: center;
}
table {
border-collapse: collapse;
}
th {
background: #efefef;
}
<table id="my-table"><table>
I am trying to create two tables and populate them with two randomized arrays. I don't remember how I got to this point but below is a codepen I have. I want to create a table class="side" and a table class="top" and put the random arrays in them. Please forgive me for the messy codes. I have no experience with coding and just want to make something for my students. Thank you.
edit1: cut the codes a little. I want to make a table with 3 cells in a column and another table with 4 cells in a row and randomly populate them with the two emojis array respectively. Can anyone help me with the JS codes?
<table class="top">
1
1
1
</table>
<table class="side">
2222
</table>
UPDATE:
Thanks to everyone for your input and advice. With the examples I was able to understand what my codes was lacking. I've posted it below for viewing and have hide the incomplete codes.
const animals = [
"🐕",
"🐈",
"🐄",
"🐐",
"🐎",
"🐖",
"🐇",
"🦆",
"🐔",
"🐁",
"🐑"
];
const fruits = [
"🍇",
"🍊",
"🍑",
"🥝",
"🍈",
"🍉",
"🥭",
"🍎",
"🍓",
"🍆",
"🥕",
"🥒",
"🫑",
"🧅",
"🍄"
];
function shuffle(a) {
let j, x, i;
for (i = a.length - 1; i > 0; i--) {
j = Math.floor(Math.random() * (i + 1));
x = a[i];
a[i] = a[j];
a[j] = x;
}
return a;
}
shuffle(animals);
let t1side = document.getElementsByClassName("tside").item(0);
for (let x = 0; x < 3; x++) {
let tr = document.createElement("tr");
for (let y = 0; y < 1; y++) {
let td = document.createElement("td");
{
td.setAttribute("id", "r" + (x + 1) + "d" + (y + 1));
td.appendChild(document.createTextNode(animals[x * 1 + y]));
}
tr.appendChild(td);
}
t1side.appendChild(tr);
}
shuffle(fruits);
let t2top = document.getElementsByClassName("ttop").item(0);
for (let x = 0; x < 1; x++) {
let tr = document.createElement("tr");
for (let y = 0; y < 4; y++) {
let td = document.createElement("td");
{
td.setAttribute("id", "r" + (x + 1) + "d" + (y + 1));
td.appendChild(document.createTextNode(fruits[x * 1 + y]));
}
tr.appendChild(td);
}
t2top.appendChild(tr);
}
* {
padding: 0;
margin: 0;
}
.top {
top: 0px;
left: 200px;
position: absolute;
}
.side {
top: 100px;
left: 0px;
position: absolute;
}
table.ttop ,table.ttop tr,table.ttop td {
height: 50px;
width: 100px;
padding: 0px;
marging: 0px;
background-color: pink;
font-size: 50px;
text-align: center;
border-collapse: collapse;
border: 0px solid none;
}
table.tside, table.tside tr, table.tside td {
height: 50px;
width: 50px;
padding: 0px;
marging: 0px;
background-color: yellow;
font-size: 80px;
text-align: center;
border-collapse: collapse;
border: 0px solid none;
}
<body>
<style>
</style>
<body>
<div class="top">
<table class="ttop">
</table>
</div>
<div class="side">
<table class="tside">
</table>
</div>
</body>
<script>
</script>
</body>
var spaces2 = [
"🐕",
"🐇",
"🦆",
"🐔",
"🐁",
"🐑"
];
var spaces = [
"🍇",
"🍊",
"🍑",
"🥝",
"🍈",
"🍉",
"🥭",
"🍎",
];
function shuffle(a) {
var j, x, i;
for (i = a.length - 1; i > 0; i--) {
j = Math.floor(Math.random() * (i + 1));
x = a[i];
a[i] = a[j];
a[j] = x;
}
return a;
}
shuffle(spaces2);
var tbody = document.getElementsByTagName("tbody").item(0);
for (var x = 0; x < 3; x++) {
var tr = document.createElement("tr");
for (var y = 0; y < 1; y++) {
var td = document.createElement("td");
{
td.setAttribute("id", "r" + (x + 1) + "d" + (y + 1));
td.appendChild(document.createTextNode(spaces2[x * 1 + y]));
}
tr.appendChild(td);
}
tbody.appendChild(tr);
}
shuffle(spaces);
var top = document.getElementsByClassName("top").item(0);
for (var x = 0; x < 1; x++) {
var tr = document.createElement("tr");
for (var y = 0; y < 4; y++) {
var td = document.createElement("td");
{
td.setAttribute("id", "r" + (x + 1) + "d" + (y + 1));
td.appendChild(document.createTextNode(spaces[x * 1 + y]));
}
tr.appendChild(td);
}
tbody.appendChild(tr);
}
* {
padding: 0;
margin: 0;
}
table.top tbody, tr, td {
height: 50px;
width: 50px;
padding: 0px;
marging: 0px;
background-color: none;
font-size: 40px;
text-align: center;
border-collapse: collapse;
border: 0px solid none;
}
table.side tbody, tr, td {
height: 50px;
width: 50px;
padding: 0px;
marging: 0px;
background-color: none;
font-size: 40px;
text-align: center;
border-collapse: collapse;
border: 0px solid none;
}
<body>
<style>
</style>
<body>
<div class="top">
<table id="top">
</table>
<div class="side">
<table id="side">
<tbody></tbody>
</table>
</div>
</body>
<script>
</script>
</body>
You want to generate tables from javaScript using an aYrray as content. Here is a small snippet of the generation of a table.
const spaces = [
"🍇",
"🍊",
"🍑",
"🥝",
"🍈",
"🍉",
"🥭",
"🍎",
"🍓",
"🍆",
"🥕",
"🥒",
"🫑",
"🧅",
"🍄"
];
function loadEvents() {
generateTable(spaces, "container", ["class1", "class2", "class3", "etc"]);
}
function generateTable(dataTable, containerId, classes) {
shuffle(dataTable);
let container = document.getElementById(containerId);
let table = document.createElement("table");
// Add classes to table
for (const clazz of classes) {
table.classList.add(clazz);
}
// Calculate cant of rows and columns
let cantDataRow = 0;
let cantDataCol = 0;
do {
cantDataRow++;
cantDataCol = Math.ceil(dataTable.length / cantDataRow);
} while (dataTable.length / Math.pow(cantDataRow, 2) > 1);
let aux = 0;
for (let i = 0; i < cantDataRow; i++) { // rows
let row = document.createElement("tr");
for (let j = 0; j < cantDataCol; j++) { // columns
let col = document.createElement("td");
col.textContent = dataTable[aux++];
row.appendChild(col); // Add column to row
}
table.appendChild(row); // Add row to table
}
container.appendChild(table); // Add table to container
}
function shuffle(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
}
addEventListener("DOMContentLoaded", loadEvents);
table, tr, td{
border: 1px solid black;
border-collapse: collapse;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div id="container"></div>
<script src="script.js"></script>
</body>
</html>
You would only have to call the function passing it the array with the data of the table, the container of the table and the classes that you want it to contain.
It is not necessary to create the shuffle function twice. It is created only once and can be called infinitely many times. I recommend using let instead of var.
Nice question :-) You only need one loop for each table. I did it with a for loop. I added a function that outputs a random image.
const t1 = document.querySelector('.top');
const t2 = document.querySelector('.side');
const spaces2 = [
"🐕",
"🐇",
"🦆",
"🐔",
"🐁",
"🐑"
];
const spaces = [
"🍇",
"🍊",
"🍑",
"🥝",
"🍈",
"🍉",
"🥭",
"🍎",
];
let tr = document.createElement('tr');
for (let i = 0; i < 3; i++) {
let td = document.createElement('td');
td.innerHTML = getRandomElement(spaces2);
tr.append(td);
}
t1.append(tr);
// t2
for (let i = 0; i < 4; i++) {
let tr = document.createElement('tr');
let td = document.createElement('td');
td.innerHTML = getRandomElement(spaces);
tr.append(td);
t2.append(tr);
}
function getRandomElement(items) {
return items[Math.floor(Math.random()*items.length)];
}
small {
font-size: 16px;
padding-left:5px;
}
table {
}
table td {
border: 2px solid #999;
padding: 5px;
}
<h2>Table 1<small>3 cols and 1 row</small></h2>
<table class="top"></table>
<h2>Table 2<small>1 cols with 4 rows</small></h2>
<table class="side"></table>
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>
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>