You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
113 lines
2.7 KiB
113 lines
2.7 KiB
3 months ago
|
/**
|
||
|
|
**-
|
||
|
|
* JavaScript providing functions for
|
||
|
|
* generating the HTML elements
|
||
|
|
* required by an article
|
||
|
|
*
|
||
|
|
* Functions to generate a table
|
||
|
|
*
|
||
|
|
* Author - Philip Osztromok
|
||
|
|
*
|
||
|
|
* 27 March 2022
|
||
|
|
*+
|
||
|
|
*/
|
||
|
|
|
||
|
|
|
||
|
|
function addTable(headers, rows) {
|
||
|
|
// Create the table element
|
||
|
|
let table = document.createElement('table');
|
||
|
|
table.style.border = '1px solid black';
|
||
|
|
table.style.borderCollapse = 'collapse';
|
||
|
|
table.style.width = '80%';
|
||
|
|
|
||
|
|
// Create the table header row
|
||
|
|
let thead = document.createElement('thead');
|
||
|
|
let headerRow = document.createElement('tr');
|
||
|
|
|
||
|
|
headers.forEach(header => {
|
||
|
|
let th = document.createElement('th');
|
||
|
|
th.style.padding = '8px';
|
||
|
|
th.style.textAlign = 'left';
|
||
|
|
th.style.border = '1px solid black';
|
||
|
|
th.textContent = header;
|
||
|
|
headerRow.appendChild(th);
|
||
|
|
});
|
||
|
|
|
||
|
|
thead.appendChild(headerRow);
|
||
|
|
table.appendChild(thead);
|
||
|
|
|
||
|
|
// Create the table body rows
|
||
|
|
let tbody = document.createElement('tbody');
|
||
|
|
|
||
|
|
rows.forEach(row => {
|
||
|
|
let tr = document.createElement('tr');
|
||
|
|
|
||
|
|
row.forEach(cell => {
|
||
|
|
let td = document.createElement('td');
|
||
|
|
td.style.padding = '8px';
|
||
|
|
td.style.border = '1px solid black';
|
||
|
|
td.textContent = cell;
|
||
|
|
tr.appendChild(td);
|
||
|
|
});
|
||
|
|
|
||
|
|
tbody.appendChild(tr);
|
||
|
|
});
|
||
|
|
|
||
|
|
table.appendChild(tbody);
|
||
|
|
|
||
|
|
// Return the table element
|
||
|
|
return table;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
//function addTable(header, details) {
|
||
|
|
// console.log("Table function called with:");
|
||
|
|
// console.log("header: ", header);
|
||
|
|
// console.log("details: ", details);
|
||
|
|
// var table = document.createElement("table");
|
||
|
|
// const columns = header.length;
|
||
|
|
// const rows = details.length;
|
||
|
|
//
|
||
|
|
// // make the header row using header
|
||
|
|
// var header_row = document.createElement("tr");
|
||
|
|
// for (const index in header) {
|
||
|
|
// var th=document.createElement("th");
|
||
|
|
// console.log("Set innerHTML in th to: ", header[index]);
|
||
|
|
// th.innerHTML=header[index];
|
||
|
|
// console.log("th is now: ", th);
|
||
|
|
// header_row.appendChild(th);
|
||
|
|
// console.log
|
||
|
|
// }
|
||
|
|
//
|
||
|
|
// console.log("Table header = ", header_row );
|
||
|
|
//
|
||
|
|
// table.appendChild(header_row);
|
||
|
|
//
|
||
|
|
// for (const i in details) {
|
||
|
|
// let details_row=document.createElement("tr");
|
||
|
|
// let line=details[i];
|
||
|
|
// console.log("Line we got is:", line);
|
||
|
|
// for (const j in line) {
|
||
|
|
// let td = document.createElement("td");
|
||
|
|
// console.log("Set innerHTML in td to: ", line[j]);
|
||
|
|
// td.innerHTML=line[j];
|
||
|
|
// console.log("td is now: ", td);
|
||
|
|
// details_row.appendChild(td);
|
||
|
|
// }
|
||
|
|
//
|
||
|
|
// console.log("Row = ", details_row);
|
||
|
|
//
|
||
|
|
// table.appendChild( details_row);
|
||
|
|
// }
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//}
|
||
|
|
|
||
|
|
export { addTable }
|
||
|
|
/*
|
||
|
|
*
|
||
|
|
* helper functions
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|