I'm trying to append the rows and header to an HTML table element using onclick event of button defined in HTML document. Although it successfully adds the header and rows, it fails to align the first element of the row with the header, and the page renders the table in a format like this :
Below is the JavaScript method for updating/adding records to table by appending rows and a header:
function updateTable(){
var usr = JSON.parse(localStorage.getItem('user'));
var i = testObject.length-1;
var header = document.createElement("th");
var usernode = document.createElement("td");
var usertext = document.createTextNode("Username");
usernode.appendChild(usertext);
header.appendChild(usernode);
var enode = document.createElement("td");
var etext = document.createTextNode("Email");
enode.appendChild(etext);
header.appendChild(enode);
var pnode = document.createElement("td");
var ptext = document.createTextNode("Password");
pnode.appendChild(ptext);
header.appendChild(pnode);
var lnode = document.createElement("td");
var ltext = document.createTextNode("Location");
lnode.appendChild(ltext);
header.appendChild(lnode);
var onode = document.createElement("td");
var otext = document.createTextNode("Organization");
onode.appendChild(otext);
header.appendChild(onode);
var noder = document.createElement("tr");
var nodeu = document.createElement("td");
var textu = document.createTextNode(usr[i].uname);
nodeu.appendChild(textu);
noder.appendChild(nodeu);
var nodee = document.createElement("td");
var texte = document.createTextNode(usr[i].email);
nodee.appendChild(texte);
noder.appendChild(nodee);
var nodep = document.createElement("td");
var textp = document.createTextNode(usr[i].pass);
nodep.appendChild(textp);
noder.appendChild(nodep);
var nodel = document.createElement("td");
var textl = document.createTextNode(usr[i].loc);
nodel.appendChild(textl);
noder.appendChild(nodel);
var nodeo = document.createElement("td");
var texto = document.createTextNode(usr[i].org);
nodeo.appendChild(texto);
noder.appendChild(nodeo);
if(document.getElementById("t").querySelector("th")==null){
document.getElementById("t").appendChild(header);
}
document.getElementById("t").appendChild(noder);
clear();
}
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="form.css">
</head>
<body>
<script src="form.js"></script>
<p id="test"></p>
<div id="userdiv">
<input type="text" placeholder="Username" id="uname">
</div>
<div id="maildiv">
<input type="text" placeholder="Email" id="email">
</div>
<div id="passdiv">
<input type="text" placeholder="Password" id="pass">
</div>
<div id="locdiv">
<input type="text" placeholder="Location" id="loc">
</div>
<div id="orgdiv">
<input type="text" placeholder="Organization" id="org">
</div>
<div id="gen">
<input type="radio"/> Male
<input type="radio"/> Female
</div>
<button id="submit" onclick="save()">Submit</button>
<table id="t" border="1">
</table>
</body>
</html>
You are using the wrong element for the header.
"TH" is the equivalent for "TD", it's a cell, it goes inside a "TR".
You are adding TDs inside a TH, you actually need to add THs inside a TR. So change your createdElement('th') with createElement('tr') and the createElement('td') with createElement('th').
I'd also recommend you to use THEAD and TBODY tags inside your table.
Getting one bug, showing first row rendered adjacent to the header row..
enter image description here
Revised code :
function updateTable(){
var usr = JSON.parse(localStorage.getItem('user'));
var i = testObject.length-1;
var noder = document.createElement("tr");
if(i==0){
var usernode = document.createElement("th");
var usertext = document.createTextNode("Username");
usernode.appendChild(usertext);
noder.appendChild(usernode);
var enode = document.createElement("th");
var etext = document.createTextNode("Email");
enode.appendChild(etext);
noder.appendChild(enode);
var pnode = document.createElement("th");
var ptext = document.createTextNode("Password");
pnode.appendChild(ptext);
noder.appendChild(pnode);
var lnode = document.createElement("th");
var ltext = document.createTextNode("Location");
lnode.appendChild(ltext);
noder.appendChild(lnode);
var onode = document.createElement("th");
var otext = document.createTextNode("Organization");
onode.appendChild(otext);
noder.appendChild(onode);
}
var nodeu = document.createElement("td");
var textu = document.createTextNode(usr[i].uname);
nodeu.appendChild(textu);
noder.appendChild(nodeu);
var nodee = document.createElement("td");
var texte = document.createTextNode(usr[i].email);
nodee.appendChild(texte);
noder.appendChild(nodee);
var nodep = document.createElement("td");
var textp = document.createTextNode(usr[i].pass);
nodep.appendChild(textp);
noder.appendChild(nodep);
var nodel = document.createElement("td");
var textl = document.createTextNode(usr[i].loc);
nodel.appendChild(textl);
noder.appendChild(nodel);
var nodeo = document.createElement("td");
var texto = document.createTextNode(usr[i].org);
nodeo.appendChild(texto);
noder.appendChild(nodeo);
/*if(document.getElementById("t").querySelector("th")==null){
document.getElementById("t").appendChild(header);
}*/
document.getElementById("t").appendChild(noder);
clear();
}
Related
I'm working on a project but am stuck on the fact that I'm unable to generate a new table after resetting the previous table.
What I would like to do is to let a user reset the table using the button and then generate another one if needed, and not needing him to reload the page. However, I am unsure why my codes only allow me to reset the table but am unable to generate another table.
Any help on this would be greatly appreciated.
function generate() {
var myTable = document.getElementById("generatedTable");
var table = document.createElement('TABLE');
table.border = '1';
var tableBody = document.createElement('TBODY');
table.appendChild(tableBody);
var rows = document.getElementById("rows").value;
var cols = document.getElementById("cols").value;
for (var y = 0; y < rows; y++) {
var tr = document.createElement('TR');
tableBody.appendChild(tr);
for (var x = 0; x < cols; x++) {
var td = document.createElement('TD');
td.width = 10;
td.height = 10;
var cellID = "cell [" + x + ", " + y + "]";
td.setAttribute("id", cellID.toString());
td.addEventListener("click", function() {
cellClicked(this);
});
td.appendChild(document.createTextNode("Cell " + x + "," + y));
tr.appendChild(td);
}
myTable.appendChild(table);
}
//document.getElementById("button").disabled = true;
}
function cellClicked(cell) {
//var cell = document.getElementById("this");
cell.style.backgroundColor = "yellow";
}
function mouseOver(cell) {
var cell = document.getElementById("td");
cell.style.backgroundColor = "red";
}
function mouseOut(cell) {
var cell = document.getElementById("generatedTable");
cell.style.backgroundColor = "";
}
function removeTable() {
var removeTab = document.getElementById('generatedTable');
var parentElement = removeTab.parentElement;
parentElement.removeChild(removeTab);
}
No. of Rows <input type="text" name="rows" id="rows">
<br>
<br> No. of Cols <input type="text" name="cols" id="cols">
<br>
<button onclick="generate()" type="button" id="button">Generate</button>
<button onclick="removeTable()" type="reset" value="reset">RESET TABLE</button>
<table id="generatedTable" onmouseover="mouseOver()" onmouseout="mouseOut()"></table>
You were using the id "generatedTable" in a confusing way, at the same time for the newly generated table and for the table you already had in your html file. And at the end you were removing the wrapper table instead of the newly generated one.
It is maybe easier to understand if you use a target element and add the table in it:
const wrapper = document.getElementById('table-wrapper');
function generate() {
var table = document.createElement('TABLE');
table.id = 'generatedTable';
table.border = '1';
var tableBody = document.createElement('TBODY');
table.appendChild(tableBody);
var rows = document.getElementById("rows").value;
var cols = document.getElementById("cols").value;
for (var y = 0; y < rows; y++) {
var tr = document.createElement('TR');
tableBody.appendChild(tr);
for (var x = 0; x < cols; x++) {
var td = document.createElement('TD');
td.width = 10;
td.height = 10;
var cellID = "cell [" + x + ", " + y + "]";
td.setAttribute("id", cellID.toString());
td.addEventListener("click", function() {
cellClicked(this);
});
td.appendChild(document.createTextNode("Cell " + x + "," + y));
tr.appendChild(td);
}
wrapper.appendChild(table);
}
//document.getElementById("button").disabled = true;
}
function cellClicked(cell) {
//var cell = document.getElementById("this");
cell.style.backgroundColor = "yellow";
}
function mouseOver(cell) {
var cell = document.getElementById("td");
cell.style.backgroundColor = "red";
}
function mouseOut(cell) {
var cell = document.getElementById("generatedTable");
cell.style.backgroundColor = "";
}
function removeTable() {
var removeTab = document.getElementById('generatedTable');
wrapper.removeChild(removeTab);
}
No. of Rows <input type="text" name="rows" id="rows">
<br>
<br> No. of Cols <input type="text" name="cols" id="cols">
<br>
<button onclick="generate()" type="button" id="button">Generate</button>
<button onclick="removeTable()" type="reset" value="reset">RESET TABLE</button>
<div id="table-wrapper"></div>
I'm creating a crud table through array objects, two fields name, and class and a submit button adds both fields with two buttons edit and delete, when I add set attribute on click to delete button it runs on the event add button, not the delet button.
i tried document.getElementById(xyz).setAttribute('onclick', function) it's not solving my problem.
I want to run the function when del button is pressed and the required event will be raised.
var arobj = [];
function load(arr) {
for (var i = 0; i < arr.length; i++) {
var row = document.createElement("tr");
var name = document.createElement("td");
var classN = document.createElement("td");
var nameValue = document.createTextNode("");
var classN = document.createTextNode("");
}
}
function addStudent(idn, idc, tab) {
var obj = {};
var row = document.createElement("tr");
var name = document.createElement("td");
var classN = document.createElement("td");
var nameValue = document.createTextNode(
document.getElementById(idn).value
);
obj.nameVal = nameValue;
var classValue = document.createTextNode(
document.getElementById(idc).value
);
obj.classVal = classValue;
arobj.push(obj);
row.setAttribute("id", (arobj.length - 1).toString());
var del = document.createElement("button");
del.innerHTML = "delete";
var edit = document.createElement("button");
edit.innerHTML = "edit";
var act = document.createElement("td");
del.setAttribute("id", "btn" + (arobj.length - 1).toString());
var delbtn = del.getElementById("btn" + (arobj.length - 1));
console.log(delbtn);
act.appendChild(del);
act.appendChild(edit);
name.appendChild(nameValue);
classN.appendChild(classValue);
row.appendChild(name);
row.appendChild(classN);
row.appendChild(act);
document.getElementById(tab).appendChild(row);
console.log(arobj);
console.log(row.getAttribute("id"));
}
function delet() {
alert("function ran");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="javascript:void(0)" onsubmit="addStudent('name','classN','table');">
name:
<input type="text" name="name" id="name" /> <br /> class:
<input type="text" name="classN" id="classN" /> <br />
<input type="submit" value="add" />
</form>
<table id="table" border="2px solid black">
<tr>
<th>name</th>
<th>class</th>
<th>action</th>
</tr>
</table>
1) use:
var delbtn = document.getElementById("btn" + (arobj.length - 1));
instead of:
var delbtn = del.getElementById("btn" + (arobj.length - 1));
2) also add code:
del.addEventListener('click', delet);
Modified some code, please see the comment following, BTW: it is efficient to use jQuery, react, Vue etc.. libraries when solve this Dom data.
function addStudent(idn, idc, tab) {
var obj = {};
var row = document.createElement("tr");
var name = document.createElement("td");
var classN = document.createElement("td");
var nameValue = document.createTextNode(
document.getElementById(idn).value
);
obj.nameVal = nameValue;
var classValue = document.createTextNode(
document.getElementById(idc).value
);
obj.classVal = classValue;
arobj.push(obj);
row.setAttribute("id", (arobj.length - 1).toString());
var del = document.createElement("button");
del.innerHTML = "delete";
var edit = document.createElement("button");
edit.innerHTML = "edit";
var act = document.createElement("td");
del.setAttribute("id", "btn" + (arobj.length - 1).toString());
var delbtn = document.getElementById("btn" + (arobj.length - 1));
// here delbtn is null, it have not add to document yet!;
console.log('delbtn',delbtn);
act.appendChild(del);
act.appendChild(edit);
name.appendChild(nameValue);
classN.appendChild(classValue);
row.appendChild(name);
row.appendChild(classN);
row.appendChild(act);
document.getElementById(tab).appendChild(row);
console.log(arobj);
console.log(row.getAttribute("id"));
// delbtn is ready now;
delbtn = document.getElementById("btn" + (arobj.length - 1));
console.log('delbtn',delbtn); // here is ok
//add click event
del.addEventListener("click",delet);
}
You need to bind event click to del button after you add the row into DOM:
var arobj = [];
function load(arr) {
for (var i = 0; i < arr.length; i++) {
var row = document.createElement("tr");
var name = document.createElement("td");
var classN = document.createElement("td");
var nameValue = document.createTextNode("");
var classN = document.createTextNode("");
}
}
function addStudent(idn, idc, tab) {
var obj = {};
var row = document.createElement("tr");
var name = document.createElement("td");
var classN = document.createElement("td");
var nameValue = document.createTextNode(
document.getElementById(idn).value
);
obj.nameVal = nameValue;
var classValue = document.createTextNode(
document.getElementById(idc).value
);
obj.classVal = classValue;
arobj.push(obj);
row.setAttribute("id", (arobj.length - 1).toString());
var del = document.createElement("button");
del.innerHTML = "delete";
var edit = document.createElement("button");
edit.innerHTML = "edit";
var act = document.createElement("td");
del.setAttribute("id", "btn" + (arobj.length - 1));
act.appendChild(del);
act.appendChild(edit);
name.appendChild(nameValue);
classN.appendChild(classValue);
row.appendChild(name);
row.appendChild(classN);
row.appendChild(act);
document.getElementById(tab).appendChild(row);
document.getElementById("btn" + (arobj.length - 1)).addEventListener('click', delet);
}
function delet() {
let row = this.parentNode.parentNode;
row.parentNode.removeChild(row);
alert("function ran");
}
<form
action="javascript:void(0)"
onsubmit="addStudent('name','classN','table');">
name:
<input type="text" name="name" id="name" /> <br />
class:
<input type="text" name="classN" id="classN" /> <br />
<input type="submit" value="add" />
</form>
<table id="table" border="2px solid black">
<tr>
<th>name</th>
<th>class</th>
<th>action</th>
</tr>
</table>
I am trying to create a separate function that once a table has been generated, a value x and y can be placed within the input and it will highlight the desired cell a certain colour.
My issue arises when I try to select the cell specifically, my code breaks down at
var change = document.getElementById("table").tr[rowIndex].td[cellIndex];
// functions to create values of r and c
function GenerateTable() {
var tblBody = document.createElement("tbody");
for (var i = 0; i < irow.value; i++) {
var row = document.createElement("tr");
for (var j = 0; j < icol.value; j++) {
var cell = document.createElement("td");
row.appendChild(cell)
}
tblBody.appendChild(row);
}
var body = document.getElementsByTagName("body")[0];
var tbl = document.createElement("table");
tbl.appendChild(tblBody);
body.appendChild(tbl);
}
//selector function
function SelectCell() {
//grab value from the input x and y
var tr = document.getElementsByTagName("tr");
var td = document.getElementsByTagName("td");
//insert the value of x and y into an array retriever
var rowIndex = document.getElementById("valy").value;
var cellIndex = document.getElementById("valx").value;
//*********BREAKS DOWN HERE*******
var change = document.getElementById("table").tr[rowIndex].td[cellIndex];
change.style.backgroundColor = "red";
//change color of specific coord
}
<label>Rows</label>
<input type="number" id="irow">
<label>Cols</label>
<input type="number" id="icol">
<input type="submit" id="smit1">
<input type="number" id="valx" placeholder="x">
<input type="number" id="valy" placeholder="y">
<input type="submit" id="smit2">
<table id="table">
</table>
I'm not sure you can chain it like this:
var change = document.getElementById("table").tr[rowIndex].td[cellIndex];
I think what you want is:
//grab value from the input x and y
var rowIndex = +document.getElementById('valy').value;
var cellIndex = +document.getElementById('valx').value;
// Get reference to the table
var table = document.getElementById('table');
// Get the tr of the table with the index rowIndex
var tr = table.querySelectorAll('tr')[rowIndex];
// Query the selected row for all column elements and select the one at the needed index
var change = tr.querySelectorAll('td')[cellIndex];
NOTE: It's probably best to validate the values in the input before trying to retrieve the DOM element to ensure the code does not break if the user enters a non integer value or a value which is out of bounds
Since I finished it anyway:
Here is a working example
var irow = document.querySelector('#irow');
var icol = document.querySelector('#icol');
var smit1 = document.querySelector('#smit1');
var valx = document.querySelector('#valx');
var valy = document.querySelector('#valy');
var smit2 = document.querySelector('#smit2');
function GenerateTable() {
var body = document.getElementsByTagName("body")[0];
var tbl = document.createElement("table");
var tblBody = document.createElement("tbody");
for (var i = 0; i < irow.value; i++) {
var row = document.createElement("tr");
for (var j = 0; j < icol.value; j++) {
var cell = document.createElement("td");
row.appendChild(cell)
}
tblBody.appendChild(row);
}
tbl.setAttribute('class', 'generated');
tbl.appendChild(tblBody);
body.appendChild(tbl);
smit1.disabled = true;
irow.disabled = true;
icol.disabled = true;
smit2.disabled = false;
valx.disabled = false;
valy.disabled = false;
}
function SelectCell() {
var tr = document.getElementsByTagName("tr");
var td = document.getElementsByTagName("td");
var rowIndex = valy.value;
var cellIndex = valx.value;
var change = document.querySelector('table.generated tbody').children[rowIndex].children[cellIndex];
change.style.backgroundColor = "red";
}
smit1.addEventListener('click', GenerateTable);
smit2.addEventListener('click', SelectCell);
table.generated td {
width: 10px;
height: 10px;
border: 1px solid #000000;
}
.width100 {
width: 100%;
}
<body>
<div class="width100">
<input type="number" id="irow" placeholder="rows">
<input type="number" id="icol" placeholder="cols">
<input type="submit" id="smit1">
</div>
<div class="width100">
<input type="number" id="valx" disabled="true" placeholder="x">
<input type="number" id="valy" disabled="true" placeholder="y">
<input type="submit" id="smit2" disabled="true">
</div>
</body>
I have to validate a table column using javascript.But I am not able to get row wise column value.I am generating this table using java script function like add row and add column. I have to submit data to insert into database .Before submission I have to check quantity and perunit price should be numeric value.
But I am not able to apply appropriate javascript API to get particular row wise column value.
please check this image
I am posting the code for what i did
<script language="javascript">
// Add row to the HTML table
function addRow() {
var table = document.getElementById('my_table'); //html table
var rowCount = table.rows.length; //no. of rows in table
var columnCount = table.rows[0].cells.length; //no. of columns in table
var row = table.insertRow(rowCount); //insert a row
var cell1 = row.insertCell(0); //create a new cell
var element1 = document.createElement("input"); //create a new element
element1.type = "checkbox"; //set the element type
element1.setAttribute('id', 'newCheckbox'); //set the id attribute
element1.setAttribute('checked',true); //set the id attribute
cell1.appendChild(element1); //append element to cell
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.setAttribute('id', 'newInput'); //set the id attribute
element2.setAttribute('name', 'sl'+rowCount);
element2.setAttribute('style', 'width: 50px');
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "textarea";
element3.setAttribute('rows', '4');
element3.setAttribute('cols','40');
element3.setAttribute('id', 'newInput'); //set the id attribute
element3.setAttribute('name', 'discription'+rowCount);
cell3.appendChild(element3);
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "text";
element4.setAttribute('id', 'newInput'); //set the id attribute
element4.setAttribute('name', 'quantity'+rowCount);
cell4.appendChild(element4);
var cell5 = row.insertCell(4);
var element5 = document.createElement("input");
element5.type = "text";
element5.setAttribute('id', 'newInput'); //set the id attribute
element5.setAttribute('name', 'price'+rowCount);
cell5.appendChild(element5);
var cell6 = row.insertCell(5);
var element6 = document.createElement("input");
element6.type = "text";
element6.setAttribute('id', 'newInput'); //set the id attribute
element6.setAttribute('name', 'CST'+rowCount);
element6.setAttribute('style', 'width: 50px');
cell6.appendChild(element6);
var cell7 = row.insertCell(6); //create a new cell
var element7 = document.createElement("input"); //create a new element
element7.type = "checkbox"; //set the element type
element7.setAttribute('id', 'vat5'); //set the id attribute
element7.setAttribute('name','tax'+rowCount);
element7.setAttribute('value','vat5');
cell7.appendChild(element7);
var cell8 = row.insertCell(7); //create a new cell
var element8 = document.createElement("input"); //create a new element
element8.type = "checkbox"; //set the element type
element8.setAttribute('id', 'vat14'); //set the id attribute
element8.setAttribute('name','tax'+rowCount);
element8.setAttribute('value','vat14') ;
cell8.appendChild(element8);
var cell9 = row.insertCell(8); //create a new cell
var element9 = document.createElement("input"); //create a new element
element9.type = "checkbox"; //set the element type
element9.setAttribute('id', 'serviceTax'); //set the id attribute
element9.setAttribute('name','tax'+rowCount);
element9.setAttribute('value','serviceTax');
cell9.appendChild(element9);
}
//Alert
// delete the selected rows from table
function deleteSelectedRows() {
var table = document.getElementById('my_table'); //html table
var rowCount = table.rows.length; //no. of rows in table
for(var i=0; i< rowCount; i++) { //loops for all row in table
var row = table.rows[i]; //return a particular row
var chkbox = row.cells[0].childNodes[0]; //get check box object
if(null != chkbox && true == chkbox.checked) { //wheather check box is selected
table.deleteRow(i); //delete the selected row
rowCount--; //decrease rowcount by 1
i--;
}
}
}
// append column to the HTML table
function addColumn() {
var tblHeadObj = document.getElementById('my_table').tHead; //table head
for (var h=0; h< tblHeadObj.rows.length; h++) {
var newTH = document.createElement('th');
tblHeadObj.rows[h].appendChild(newTH); //append ne th to table
newTH.innerHTML = 'Column '+ (tblHeadObj.rows[h].cells.length); //append th content to th
}
var tblBodyObj = document.getElementById('my_table').tBodies[0]; //table body
for (var i=0; i< tblBodyObj.rows.length; i++) {
var newCell = tblBodyObj.rows[i].insertCell(-1); //create new cell
newCell.innerHTML = 'cell '+ (tblBodyObj.rows[i].cells.length); //append data to cell
}
}
// delete table rows with index greater then 0
function deleteAllRows() {
var tbl = document.getElementById('my_table'); // table reference
lastRow = tbl.rows.length - 1; // set the last row index
// delete rows with index greater then 0
for (i = lastRow; i > 0; i--) {
tbl.deleteRow(i); //delete the row
}
}
// delete last table column
function deleteColumn() {
var allRows = document.getElementById('my_table').rows;
for (var i=0; i< allRows.length; i++) {
if (allRows[i].cells.length > 3) {
allRows[i].deleteCell(-1); //delete the cell
} else {
alert("You can't delete more columns.");
return;
}
}
}
function generate(){
var table = document.getElementById('my_table');
var rowCount = table.rows.length;
var f = document.form;
f.target = "_blank";
f.method="post";
f.action='ViewPO.jsp?rowCount='+rowCount;
f.submit();
}
function generate1(){
var table = document.getElementById('my_table');
var rowCount = table.rows.length;
document.write(rowCount)
var a;
var b=document.myform.punitprice.value;
var c=document.myform.ptax.value;
var regexLetter = /[a-zA-z]/;
for(var j=1;i<=rowcount;i++){
var oCells = table.rows.item(j).cells;
a=oCells[3].firstChild.data;
}
if(regexLetter.test(a)){
alert('Enter Only Numeric Values For ');
return false;
}
var f = document.form;
f.target = "";
f.method="post";
f.action='purchaseAction.jsp?rowCount='+rowCount;
// f.submit();
}
</script>
<table id="my_table" align="center" border="2" cellpadding="0" cellspacing="0">
<thead><tr>
<th>Select</th>
<th>Sl.no</th>
<th>Description of Services/Goods</th>
<th>Quantity</th>
<th>Price/Unit</th>
<th>CST %</th>
<th>VAT5.5%</th>
<th>VAT14.5%</th>
<th>ServiceTax%</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<br>
</center>
<center>
<hr/>
<bgcolor ="red"/>
<input type="button" value="Add row" name="add" onClick="addRow()"/>
<input type="button" value="Delete selected rows" name="delete_all" onClick="deleteSelectedRows()" />
<input type="button" value="Delete all rows" name="delete" onClick="deleteAllRows()" /><br/>
<hr/>
<p>
<input type="submit" value="Save" onclick="generate1()" />
<input type="submit" value="View PO" onclick="generate()"/>
</center>
<hr/>
</form>
</div>
Help me as soon as possible.
Html file:
<body>
<table id="tblUser"></table>
</body>
Javascript :
var userName="Tom";
var age= "21";
//now to put these data into a table
Now, how to put the data inside Javascript into table so that it looks like this
Name - Age
Tom 21
You should use createElement() and appendChild(), check example bellow.
Hope this helps.
var table = document.getElementById('tblUser');
var userName="Tom";
var age= "21";
var tr = document.createElement('tr');
var td_1 = document.createElement('td');
var td_2 = document.createElement('td');
var text_1 = document.createTextNode('Name');
var text_2 = document.createTextNode('Age');
td_1.appendChild(text_1);
td_2.appendChild(text_2);
tr.appendChild(td_1);
tr.appendChild(td_2);
table.appendChild(tr);
var tr_2 = document.createElement('tr');
var td_3 = document.createElement('td');
var td_4 = document.createElement('td');
var text_3 = document.createTextNode(userName);
var text_4 = document.createTextNode(age);
td_3.appendChild(text_3);
td_4.appendChild(text_4);
tr_2.appendChild(td_3);
tr_2.appendChild(td_4);
table.appendChild(tr_2);
document.body.appendChild(table);
<table id="tblUser" border=1></table>