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.
112 lines
2.7 KiB
112 lines
2.7 KiB
/** |
|
**- |
|
* 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 |
|
* |
|
*/ |
|
|
|
|