Menu
My question will ultimately be related to this site:
http://dbtest.net16.net/ethanol-01.html
EDIT: View unencrypted page source code here >>> http://dbtest.net16.net/ethanol-22.html
This is an HTML form with results calculated using JavaScript. My goal is to display a table of 2-6 columns and variable number of rows depending on user input (form would be modified). My problem is that I am not fully understanding how to get the table created in JavaScript after the user clicks the Calculate button. I have found some potential good answers but apparently don't fully understand it all. Running the following code is somewhat like what I want my output to display.
<html>
<!-- http://www.java2s.com/Tutorial/JavaScript/0220__Array/OutputarrayelementinaHTMLtableformat.htm -->
<head>
<title>Table of Numbers</title>
</head>
<body>
<h1>Table of Numbers</h1>
<table border="0">
<script language="javascript" type="text/javascript">
<!--
var myArray = new Array();
myArray[0] = 1;
myArray[1] = 2.218;
myArray[2] = 33;
myArray[3] = 114.94;
myArray[4] = 5;
myArray[5] = 33;
myArray[6] = 114.980;
myArray[7] = 5;
document.write("<tr><td style='width: 100px; color: red;'>Col Head 1</td>");
document.write("<td style='width: 100px; color: red; text-align: right;'>Col Head 2</td>");
document.write("<td style='width: 100px; color: red; text-align: right;'>Col Head 3</td></tr>");
document.write("<tr><td style='width: 100px;'>---------------</td>");
document.write("<td style='width: 100px; text-align: right;'>---------------</td>");
document.write("<td style='width: 100px; text-align: right;'>---------------</td></tr>");
for (var i = 0; i < 8; i++) {
document.write("<tr><td style='width: 100px;'>Number " + i + " is:</td>");
myArray[i] = myArray[i].toFixed(3);
document.write("<td style='width: 100px; text-align: right;'>" + myArray[i] + "</td>");
document.write("<td style='width: 100px; text-align: right;'>" + myArray[i] + "</td></tr>");
}
//-->
</script>
</table>
</body>
</html>
If I can get the test table to be created and populated with my test data using my actual javascript file, then I should then be able to figure the rest myself (I think).
Following are a couple of the best answers I could find so far:
http://jsfiddle.net/drewnoakes/YAXDZ/
The above link originated in stackoverflow but I can't seem to find the original post at this time.
http://www.java2s.com/Tutorial/JavaScript/0220__Array/OutputarrayelementinaHTMLtableformat.htm
Any help is appreciated. Simpler is better due to my limited experience.
897
function generateTableHead(table, data) { let thead = table. createTHead(); let row = thead. insertRow(); for (let key of data) { let th = document. createElement("th"); let text = document.
Create a Table Using JavaScript. To create an HTML element using JavaScript we have to use a method called document. createElement() that takes tag name which is a string as a parameter. For instance, we want to create a table, so we will pass the string table as an input to the createElement() method document.
An HTML table is created with an opening <table> tag and a closing </table> tag. Inside these tags, data is organized into rows and columns by using opening and closing table row <tr> tags and opening and closing table data <td> tags. Table row <tr> tags are used to create a row of data.
The problem is that if you try to write a <table> or a <tr> or <td> tag using JS every time you insert a new tag the browser will try to close it as it will think that there is an error on the code.
Instead of writing your table line by line, concatenate your table into a variable and insert it once created:
<script language="javascript" type="text/javascript"> <!-- var myArray = new Array(); myArray[0] = 1; myArray[1] = 2.218; myArray[2] = 33; myArray[3] = 114.94; myArray[4] = 5; myArray[5] = 33; myArray[6] = 114.980; myArray[7] = 5; var myTable= "<table><tr><td style='width: 100px; color: red;'>Col Head 1</td>"; myTable+= "<td style='width: 100px; color: red; text-align: right;'>Col Head 2</td>"; myTable+="<td style='width: 100px; color: red; text-align: right;'>Col Head 3</td></tr>"; myTable+="<tr><td style='width: 100px; '>---------------</td>"; myTable+="<td style='width: 100px; text-align: right;'>---------------</td>"; myTable+="<td style='width: 100px; text-align: right;'>---------------</td></tr>"; for (var i=0; i<8; i++) { myTable+="<tr><td style='width: 100px;'>Number " + i + " is:</td>"; myArray[i] = myArray[i].toFixed(3); myTable+="<td style='width: 100px; text-align: right;'>" + myArray[i] + "</td>"; myTable+="<td style='width: 100px; text-align: right;'>" + myArray[i] + "</td></tr>"; } myTable+="</table>"; document.write( myTable); //--> </script> If your code is in an external JS file, in HTML create an element with an ID where you want your table to appear:
<div id="tablePrint"> </div> And in JS instead of document.write(myTable) use the following code:
document.getElementById('tablePrint').innerHTML = myTable; If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
