Add a header row and a time column to a generated HTML table with jQuery
Question
I have these two working JavaScript functions
https://github.com/cryptomanxxx/Random2DArrayPlusHtmlTable https://cryptomanxxx.github.io/Random2DArrayPlusHtmlTable/
that 1) generates some random data 2) creates a HTML table for such data. There are two problems.
1) The HTML table column headings (the first row in the HTML table) are missing. Which is the simples way to add a row (should be the first row) with column headings to the HTML table? The column heading row should say something generic like this: variable 1, variable 2, variable 3 etc etc
2) The HTML table does not have a column with timestamps. A new column (first column) with timestamps would also be nice like: time 1, time 2, time 3 etc etc
It is obvious that I have not managed to understand how the code works because if I did it would be easy to modify the code. The complexity is overwhelming.
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript" src="JavaS.js"></script> <meta charset="utf-8" /> <style> table { border-collapse: collapse; } table, td, th { border: 1px solid black; } </style> </head> <body> <div id="div1"> </body> <script> htmlTable(RandomArray(8, 4)); </script> </html>
function RandomArray(rows, cols) { var arr = []; for (var i = 0; i < rows; i++) { arr.push([]); arr[i].push(new Array(cols)); for (var j = 0; j < cols; j++) { arr[i][j] = Math.random(); } } console.log(arr); return arr; } function htmlTable(d) { var data = d; var html = '<table><thead><tr></tr></thead><tbody>'; for (var i = 0, len = data.length; i < len; ++i) { html += '<tr>'; for (var j = 0, rowLen = data[i].length; j < rowLen; ++j) { html += '<td>' + data[i][j] + '</td>'; } html += "</tr>"; } $(html).appendTo('#div1') ; }
1 answers
solution1
0 ACCPTED 2019-04-01 22:26:04
Don't stress about the complexity, it gets easier the longer you play with it.
1) If you want column headers, that's what th tags are for... and they should go inside the thead tags you already have, like this:
var html = '<table><thead><tr><th>Timestamp</th><th>Variable 1</th><th>Variable 2</th><th>Variable 3</th><th>Variable 4</th></tr></thead><tbody>';
Read more about HTML tables here .
2) If you want an additional column, add in a value ( a td - short for table data ) before the loop that adds the randomize values
...
html += '<tr>';
html += '<td>' + new Date().getTime() + '</td>' <------ NEW CODE TO ADD ANOTHER VALUE
for (var j = 0, rowLen = data[i].length; j < rowLen; ++j) {
...
You can learn more about dates, both creating them and displaying them, here .
All said and done, your function would look like:
function htmlTable(d) {
var data = d;
var html = '<table><thead><tr><th>Timestamp</th><th>Variable 1</th><th>Variable 2</th><th>Variable 3</th><th>Variable 4</th></tr></thead><tbody>';
for (var i = 0, len = data.length; i < len; ++i) {
html += '<tr>';
html += '<td>' + new Date().getTime() + '</td>'
for (var j = 0, rowLen = data[i].length; j < rowLen; ++j) {
html += '<td>' + data[i][j] + '</td>';
}
html += "</tr>";
}
$(html).appendTo('#div1') ;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.