We Keep Coding

Dynamically created html table data not showing in order as expected

function CreateWeakHeader(name) {
var tr = document.createElement('tr');
var td = document.createElement('td');
td.classList.add("cal-usersheader");
td.style.color = "#000";
td.style.backgroundColor = "#7FFF00";
td.style.padding = "0px";
td.appendChild(document.createTextNode(name));
tr.appendChild(td);
var thh = document.createElement('td');
thh.colSpan = "31";
thh.style.color = "#FFFFFF";
thh.style.backgroundColor = "#7FFF00";
tr.appendChild(thh);
return tr;
}
function htmlTable(data, columns) {
var header = document.createElement("div");
header.classList.add("table-responsive");
var header2 = document.createElement("div");
header2.id = "calplaceholder";
header.appendChild(header2);
var header3 = document.createElement("div");
header3.classList.add("cal-sectionDiv");
header2.appendChild(header3);
if ((!columns) || columns.length == 0) {
columns = Object.keys(data[0]);
}
var tbe = document.createElement('table');
tbe.classList.add("table", "table-striped", "table-bordered");
var thead = document.createElement('thead');
thead.classList.add("cal-thead");
tbe.appendChild(thead);
var tre = document.createElement('tr');
for (var i = 0; i < columns.length; i++) {
var the = document.createElement('th');
the.classList.add("cal-toprow");
the.textContent = columns[i];
tre.appendChild(the);
}
thead.appendChild(tre);
var tbody = document.createElement('tbody');
tbody.classList.add("cal-tbody");
tbe.appendChild(tbody);
var week = 0;
//tbody.appendChild(CreateWeakHeader("Week " + week));
var tre = document.createElement('tr');
for (var j = 0; j < data.length; j++) {
if (j % 7 == 0) {
week++;
tbody.appendChild(CreateWeakHeader("Week " + week));
}
var thead = document.createElement('td');
thead.classList.add("ui-droppable");
thead.appendChild(data[j]);
tre.appendChild(thead);
tbody.appendChild(tre);
}
header3.appendChild(tbe);
document.body.appendChild(header);
}
$("#tb").click(function() {
var header = document.createElement("div");
header.innerHTML = "test";
var d = [header, header, header, header, header, header, header, header];
htmlTable(d, days);
});
var days = ['Maandag', 'Dinsdag', 'Woensdag', 'Donderdag', 'Vrijdag', 'Zaterdag', 'Zondag'];
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="tb">CreateTable</button>
I'm trying to order the data that I get from my server to match the columns of my table.
My table columns are days from Monday to Sunday. When my data has more than 7items it needs to separate with another td. The td shows me week 1 and when my data has more than 7 items it needs to separate again that shows week 2 etc.
Update
Im now using a snipped verdion of my code.
Hope someone can help me out with this.
Thank you

There's a few things going on in the code that are problematic.
An attempt to add the table cells to the row, and the row to the table, was made on each iteration of the for loop. That would have produced a lot of rows with single cells had it worked.
It didn't work because there was only ever a single instance of tre, the row variable. So that meant the line tbody.appendChild(tre); did nothing, since appendChild won't append an element that already has a parent element.
Because your data was an array of references to HTMLElements with parents, appending them using appendChild did nothing for the same reason.
I've amended the code below to take care of all of these situations.
Firstly, the code will append a clone of the data to the cell if it's an HTMLElement. I expect in your real code you won't need this, but for this example, why not? It then appends the cell to the row and continues to the next data element.
Secondly, when the data iterator is at 7, before it appends the "Week N" header, it appends a clone of the row, if it has cells on it.
Finally, after appending the clone of the row, the code will reset the row variable to a new instance of a tr element, with no cells.
I also made some variable name and formatting changes to your code just so I could more easily work with it.
function CreateWeakHeader(name) {
var tr = document.createElement('tr');
var td = document.createElement('td');
td.classList.add("cal-usersheader");
td.style.color = "#000";
td.style.backgroundColor = "#7FFF00";
td.style.padding = "0px";
td.appendChild(document.createTextNode(name));
tr.appendChild(td);
var thh = document.createElement('td');
thh.colSpan = "6"; // "31"; Why 31? A week has 7 days...
thh.style.color = "#FFFFFF";
thh.style.backgroundColor = "#7FFF00";
tr.appendChild(thh);
return tr;
}
function htmlTable(data, columns) {
var header = document.createElement("div");
header.classList.add("table-responsive");
var header2 = document.createElement("div");
header2.id = "calplaceholder";
header.appendChild(header2);
var header3 = document.createElement("div");
header3.classList.add("cal-sectionDiv");
header2.appendChild(header3);
if ((!columns) || columns.length == 0) {
columns = Object.keys(data[0]);
}
var tbe = document.createElement('table');
tbe.classList.add("table", "table-striped", "table-bordered");
var thead = document.createElement('thead');
thead.classList.add("cal-thead");
tbe.appendChild(thead);
var tre = document.createElement('tr');
for (var i = 0; i < columns.length; i++) {
var the = document.createElement('th');
the.classList.add("cal-toprow");
the.textContent = columns[i];
tre.appendChild(the);
}
thead.appendChild(tre);
var tbody = document.createElement('tbody');
tbody.classList.add("cal-tbody");
tbe.appendChild(tbody);
var week = 0;
//tbody.appendChild(CreateWeakHeader("Week " + week));
var tre = document.createElement('tr');
for (var j = 0; j < data.length; j++) {
if (j % 7 == 0) {
week++;
/* Major changes start here */
// if the row has cells
if (tre.querySelectorAll('td').length) {
// clone and append to tbody
tbody.appendChild(tre.cloneNode(true));
// reset table row variable
tre = document.createElement('tr');
}
// then append the Week header
tbody.appendChild(CreateWeakHeader("Week " + week));
}
var td = document.createElement('td');
td.classList.add("ui-droppable");
// Set the value of the cell to a clone of the data, if it's an HTMLElement
// Otherwise, make it a text node.
var value = data[j] instanceof HTMLElement ?
data[j].cloneNode(true) :
document.createTextNode(data[j]);
td.appendChild(value);
tre.appendChild(td);
}
// If the number of data elements is not evenly divisible by 7,
// the remainder will be on the row variable, but not appended
// to the tbody, so do that.
if (tre.querySelectorAll('td').length) {
tbody.appendChild(tre.cloneNode(true));
}
header3.appendChild(tbe);
document.body.appendChild(header);
}
$("#tb").click(function() {
var header = document.createElement("div");
header.innerHTML = "test";
var d = [header, header, header, header, header, header, header, header];
htmlTable(d, days);
});
var days = ['Maandag', 'Dinsdag', 'Woensdag', 'Donderdag', 'Vrijdag', 'Zaterdag', 'Zondag'];
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="tb">CreateTable</button>

Parent node undefined in button creation

I'm developing a test build for my project, which includes a lot of data manipulation. I have two buttons inline at the end of the rows, one for editing, and one for committing the changes made.
function editRow(btn) {
var row = btn.parentNode.parentNode;
row.contentEditable = "true";
row.focus();
}
function addRow(tableID, numberOfCells) {
var tbl = document.getElementById(tableID);
//create rows
var newRow = tbl.insertRow(-1);
var i;
for (i = 0; i < numberOfCells; i++) {
newRow.insertCell(0);
}
//assignbuttons
var lastcell = newRow.cells[numberOfCells - 1];
addEditButton(lastcell);
addCommitButton(lastcell);
}
function addEditButton(context) {
var button = document.createElement("input");
button.type = "button";
button.value = "Edit";
button.onclick = editRow(this);
context.appendChild(button);
}
The user will press the new row button, and then an empty row will appear along with the two buttons.
I am getting the error:
Uncaught TypeError: Cannot read property 'parentNode' of undefined
at editRow (js.js:97)
at addEditButton (js.js:123)
at addRow (js.js:115)
at HTMLButtonElement.onclick (index.html:36)

There are 2 problems I can see.
button.onclick = editRow(this); the this would result in undefined (in strict mode) in that scope. You can probably fix this by sending in the button element
button.onclick = editRow(button);
More reading on this in a function scope
Also you are not creating a row with a td element to place the button in. So btn.parentNode.parentNode is not the row element as you are expecting
Try this
function editRow(btn) {
var row = btn.parentNode.parentNode;
row.contentEditable = "true";
row.focus();
}
function addRow(tableID, numberOfCells) {
var tbl = document.getElementById(tableID);
//create rows
var newRow = tbl.insertRow(-1);
var i;
for (i = 0; i < numberOfCells; i++) {
newRow.insertCell(0);
}
//assignbuttons
var lastcell = newRow.cells[numberOfCells - 1];
addEditButton(lastcell);
//addCommitButton(lastcell);
}
function addEditButton(context) {
var row = document.createElement("row");
var td = document.createElement("td");
var button = document.createElement("input");
button.type = "button";
button.value = "Edit";
td.appendChild(button);
row.appendChild(td);
context.appendChild(row);
button.onclick = editRow(button);
}
addRow("myTable", 2)
<table id="myTable">
</table>

function addRow(tableID, numberOfCells) {
var tbl = document.getElementById(tableID);
var tableHTML = $("#" + tableID).html();
if(numberOfCells === 5) {
$("#" + tableID).html(tableHTML + "<tr id=\"bikeTableBike_new\"><td>-</td><td>-</td><td>-</td><td>-</td><td><button id=\"editBikeButton\" class=\"tableButtons\" onclick=\"editRow(this)\"><img src=\"images/edit.png\"/></button><button id=\"deleteBikeButton\" class=\"tableButtons\" onclick=\"commitRow(this)\"><img src=\"images/commit.png\"/></button></td></tr>");
}
if(numberOfCells === 4) {
$("#" + tableID).html(tableHTML + "<tr id=\"bikeTableBike_new\"><td>-</td><td>-</td><td>-</td><td><button id=\"editBikeButton\" class=\"tableButtons\" onclick=\"editRow(this)\"><img src=\"images/edit.png\"/></button><button id=\"deleteBikeButton\" class=\"tableButtons\" onclick=\"commitRow(this)\"><img src=\"images/commit.png\"/></button></td></tr>");
}
if(numberOfCells === 3) {
$("#" + tableID).html(tableHTML + "<tr id=\"bikeTableBike_new\"><td>-</td><td>-</td><td><button id=\"editBikeButton\" class=\"tableButtons\" onclick=\"editRow(this)\"><img src=\"images/edit.png\"/></button><button id=\"deleteBikeButton\" class=\"tableButtons\" onclick=\"commitRow(this)\"><img src=\"images/commit.png\"/></button></td></tr>");
}
}

How to add nested datatable to HTML table

I am building a table dynamically with JavaScript, and I need to nest another table which will be a jQuery datatable inside the first table which is HTML.
I have what I thought would work and after researching, I don't see why it isn't working. I am defining my first table, building out the header and then adding rows. Inside of a cell, I build the table that will be the datatable.
Using console.log, it looks to be built correctly, but it doesn't display correctly. Instead, it shows only the first table and then appears as if it is not in a table, but rather just haphazardly placed on the page. Here is my code. I would greatly appreciate it if someone will look at it and see if they see a problem with it.
By the way, I don't think it would make any difference, but my openDetailRow function is based on a click coming from a row in an existing datatable.
function openDetailRow() {
$("#gridTbl tr td:nth-child(1)").on("click",
function () {
var ndx = $(this).closest('tr').find('td:eq(0)').text();
var dataRow = reportApp.grid.fnGetData(this.parentNode);
addElements(dataRow);
});
}
function getDetails() {
$("#hdrTbl").dialog({
resizable: false,
modal: true,
title: "Order Details",
height: 250,
width: 700,
buttons: {
"Close": function () {
$(this).dialog('destroy');
$(this).remove();
$("#ordDiv").remove();
}
}
});
}
function buildHdrTable(dataRow){
var hdrDets = [];
hdrDets[0] = dataRow.ordnbr;
hdrDets[1] = dataRow.custordnbr;
hdrDets[2] = dataRow.carrier;
hdrDets[3] = dataRow.custid;
var rowDets = [];
dataRow.detail.forEach(
function (el) {
var rowAr = [];
rowAr[0] = el.invtid;
rowAr[1] = el.descr;
rowAr[2] = el.pcs;
rowAr[3] = el.status;
rowDets.push(rowAr);
});
hdrTbl = document.createElement('table');
hdrTbl.cellPadding = 5;
hdrTbl.style.width = '750px';
hdrTbl.style.display = 'none';
hdrTbl.setAttribute("id", "hdrTbl");
var hdrVals = ["Ord #", "Cust Ord #", "Ship Via", "Cust ID" ];
var tblHead = document.createElement('thead');
hdrTbl.appendChild(tblHead);
tblHeadRow = document.createElement("tr");
tblHead.appendChild(tblHeadRow);
for(var i =0; i < hdrVals.length; i++){
tblHeadRow.appendChild(document.createElement("th")).
appendChild(document.createTextNode(hdrVals[i]));
}
var hdrBody = document.createElement("tbody");
hdrTbl.appendChild(hdrBody);
var tr = hdrBody.insertRow();
var td1 = tr.insertCell();
var td2 = tr.insertCell();
var td3 = tr.insertCell();
var td4 = tr.insertCell();
td1.appendChild(document.createTextNode(hdrDets[0]));
td2.appendChild(document.createTextNode(hdrDets[1]));
td3.appendChild(document.createTextNode(hdrDets[2]));
td4.appendChild(document.createTextNode(hdrDets[3]));
var bdy = hdrBody.insertRow();
var bdyTbl = bdy.insertCell();
tbl = document.createElement('table');
tbl.style.width = '100%';
tbl.style.display = 'none';
//tbl.style.border = "1px solid black";
tbl.setAttribute("id", "ordertable");
var headVals = ["Inventory Number", "Description", "Number of Pieces", "Status"];
var thead = document.createElement('thead');
tbl.appendChild(thead);
var theadRow = document.createElement("tr");
thead.appendChild(theadRow);
for (var i = 0; i < headVals.length; i++) {
theadRow.appendChild(document.createElement("th"))
.appendChild(document.createTextNode(headVals[i]));
}
var tbody = document.createElement("tbody");
tbl.appendChild(tbody);
for (var i = 0; i < rowDets.length; i++) {
var tr = tbody.insertRow();
var td1 = tr.insertCell();
var td2 = tr.insertCell();
var td3 = tr.insertCell();
var td4 = tr.insertCell();
td1.appendChild(document.createTextNode(rowDets[i][0]));
td2.appendChild(document.createTextNode(rowDets[i][1]));
td3.appendChild(document.createTextNode(rowDets[i][2]));
td4.appendChild(document.createTextNode(rowDets[i][3]));
bdyTbl.appendChild(tbl);
}
return hdrTbl;
}
function addElements(dataRow) {
var body = document.body;
var hdrTbl = buildHdrTable(dataRow);
ordDiv = document.createElement("div");
ordDiv.appendChild(hdrTbl);
ordDiv.setAttribute("id", "ordDiv");
body.appendChild(ordDiv);
$("#ordertable").css('display', 'none');
$("#ordertable").dataTable(tbl);
getDetails();
console.log(hdrTbl);
}

The issue was caused because I was using display:none. Now here is the thing.. If you don't use that particular style attribute, then the table will show up on the page. However, since it is nested inside my first table, and the first table has the display:none style attribute already applied to it, then by applying it to the second table, it would not allow that table to be shown on page.
As for the skewed look, I had not set a colspan. So now, it is working perfectly. I commented out the display none and added this one line of code...
bdyTbl.setAttribute("colspan", 4);

Delete row from table dynamically created in javaScript

I want to delete a row from a table created by JavaScript. i tried the code from different post on this page but doesn't solve it.
function value_pass()
{
var Delete = document.createElement("input");
Delete.type="button";
Delete.name = "del"
Delete.value = "Delete";
Delete.onclick = function(o)
{
var r = o.parentElement.parentElement;
document.getElementById("table").deleteRow(r.rowIndex);
}
var order_no = document.getElementById("Order_no");
var quantity = document.getElementById("quantity");
var type = document.getElementById("Recipe");
var recipe = type.options[type.selectedIndex].text;
var body1 = document.getElementsByTagName("body")[0];
var tbl = document.createElement("table");
tbl.setAttribute("id","table");
var tblbody = document.createElement("tbody");
tbl.setAttribute("border","2");
var col = document.createElement("td");
for (var j = 0; j < 1; j++)
{
var rows = document.createElement("tr");
for (var i = 0; i < 4; i++)
{
var col1 = document.createElement("td");
var col2 = document.createElement("td");
var col3 = document.createElement("td");
var col4 = document.createElement("td");
var col5 = document.createElement("td");
var col1text = document.createTextNode(order_no.value);
var col2text = document.createTextNode(recipe);
var col3text = document.createTextNode(quantity.value);
var col4text = document.createTextNode();
//also want to put checked values in table row
}
col1.setAttribute("width","150");
col2.setAttribute("width","150");
col3.setAttribute("width","150");
col4.setAttribute("width","150");
col1.appendChild(col1text);
col2.appendChild(col2text);
col3.appendChild(col3text);
col4.appendChild(col4text);
col5.appendChild(Delete);
rows.appendChild(col1);
rows.appendChild(col2);
rows.appendChild(col3);
rows.appendChild(col4);
rows.appendChild(col5);
tblbody.appendChild(rows);
} tbl.appendChild(tblbody);
body1.appendChild(tbl);
}
The function will be called by a button in HTML
its an order form that
and also want to know about the checked values of checkbox to put in the table row.

You can use :
document.getElementById("myTable").deleteRow(0); //Where 0 is your row.
Explained : http://www.w3schools.com/jsref/met_table_deleterow.asp
Edit:
To delete the current row, set this on your button: onclick="deleteRow(this), with the following code in that function:
function deleteRow(t)
{
var row = t.parentNode.parentNode;
document.getElementById("myTable").deleteRow(row.rowIndex);
console.log(row);
}

html dynamically generating form but not giving the value of date in url when posting it

function addrow() {
document.getElementById("myTableData").style.display="block";
/*displaying div on click of button abc*/
var el = document.createElement('input');
el.type = 'text';
el.name = 'kname';
/*creating name field*/
var el_r = document.createElement('input');
el_r.type = 'radio';
el_r.name = 'gender';
el_r.value ='FEMALE';
el_r.id = "rad1";
el_r.defaultChecked = true;
/* creating radio button for gender field */
var el_r2 = document.createElement('input');
el_r2.type = 'radio';
el_r2.name = 'gender';
el_r2.value ='MALE';
el_r2.id = "rad2";
/* creating radio button for gender field */
var obj1 = document.createTextNode("Female");
var obj2 = document.createTextNode("Male");
var objLabel = document.createElement("label");
objLabel.htmlFor = el_r.id;
objLabel.appendChild(el_r);
objLabel.appendChild(obj1);
var objLabel2 = document.createElement("label");
objLabel2.htmlFor = el_r2.id;
objLabel2.appendChild(el_r2);
objLabel2.appendChild(obj2);
/* creating drop down for date field */
var el_s = document.createElement('select');
el_s.onchange = function(){
var r = el_s.options[el_s.selectedIndex].value;
alert("selected date"+r); //cheking the selected date value;
}
for(var i=0;i<32;i++)
{
var j = i;
j = document.createElement('option');
j.text=i;
j.name="day";
j.value=j;
el_s.appendChild(j);
}
var month = new Array("January","Februray","March","April","May","June","July","August","September","October","November","December");
var el_sm = document.createElement('select');
for(var i=0;i<month.length;i++)
{
var j = i;
j = document.createElement('option');
j.text=month[i];
j.name="month";
j.value=month[i];
el_sm.appendChild(j);
}
var el_sy = document.createElement('select');
for(var i=2013;i>1950;i--)
{
var j = i;
j = document.createElement('option');
j.text=i;
j.name="year";
j.value=j;
el_sy.appendChild(j);
}
var table = document.getElementById("myTableData");
var tableBody = document.createElement('TBODY');
table.appendChild(tableBody);
var tr = document.createElement('TR');
tableBody.appendChild(tr);
var td = document.createElement('TD');
td.width='175';
td.appendChild(el);
tr.appendChild(td);
var td = document.createElement('TD');
td.width='245';
td.appendChild(objLabel);
td.appendChild(objLabel2);
tr.appendChild(td);
var td = document.createElement('TD');
td.width='245';
td.appendChild(el_s);
td.appendChild(el_sm);
td.appendChild(el_sy);
tr.appendChild(td);
myTableData.appendChild(table);
}
</script>
<input type="submit" value="submit"/>
i am dynamically generating form in HTML with the help of javascript on button click named abc. my code is working fine , when i am inserting values ,but when i am posting this form with the help of button the values name and gender is showing in address bar but the DATE ( element name"el_s") selected values is not showing in addressbar.
there are 2 buttons in first displays the div in which form is shown and next one is submit button of form

You must set el_s.name='date' in order for the data to be automatically posted.