I'm creating a multiplication table using JavaScript and HTML. I'm unable to properly format the table. I'm able to calculate all the numbers correctly but each number is supposed to be in a cell formatted in a certain way. In my table, I tried to assign each cell to and "outer-cell" and "inner-cell" class so I could customize the cells in a css file but it doesn't work. I even tried customizing all the "th" and "td" tags in my css file and that didn't work. Any change I make just doesn't show up on the web browser. For example, if in my css file I do
outer-cell {
border-style:solid;
}
I thought that would create a box around all cells but it's not working.
Attached is a photo of what it looks like and what it should look like.
var row_min, row_max, column_min, column_max;
console.log("hello");
function getUserInput() {
row_min = parseInt(document.getElementById("row_min").value);
row_max = parseInt(document.getElementById("row_max").value);
col_min = parseInt(document.getElementById("col_min").value);
col_max = parseInt(document.getElementById("col_max").value);
console.log(row_min, row_max, col_min, col_max);
generateTable();
}
/*
* Function to validate user input
*
*/
/*
* Function to validate user input
*/
function generateTable()
{
// clear current table
var tableDiv = document.getElementById("table-placeholder");
while (tableDiv.hasChildNodes()) {
tableDiv.firstChild.remove();
}
console.log("here");
var table = document.createElement("table");
table.setAttribute("id", "multiplicationTable");
tableDiv.appendChild(table);
// create header row
var newRow = document.createElement("tr");
table.appendChild(newRow);
// create headers in header row
var newHeader = document.createElement("th");
newHeader.setAttribute("class", "outer-cell");
newRow.appendChild(newHeader);
for (let x = col_min; x <= col_max; x++) {
newHeader = document.createElement("th");
newHeader.setAttribute("class", "outer-cell");
newHeader.textContent = x;
newRow.appendChild(newHeader);
}
// start filling up rows
for (let y = row_min; y <= row_max; y++) {
// create new row
newRow = document.createElement("tr");
table.appendChild(newRow);
// add items to row
let newCell = document.createElement("td");
newCell.textContent = y;
newCell.setAttribute("class", "outer-cell");
newRow.appendChild(newCell);
for (let x = col_min; x <= col_max; x++) {
newCell = document.createElement("td");
newCell.textContent = x * y;
newCell.setAttribute("class", "inner-cell");
newRow.appendChild(newCell);
}
}
}
Here's something to get you started:
You can fine tune it yourself. Use inspect element in Chrome and find the right CSS element to adjust.
var row_min, row_max, column_min, column_max; function getUserInput() { row_min = 1; row_max = 5; col_min = 1; col_max = 5; generateTable(); } /* * Function to validate user input * */ /* * Function to validate user input */ function generateTable() { // clear current table var tableDiv = document.getElementById("table-placeholder"); while (tableDiv.hasChildNodes()) { tableDiv.firstChild.remove(); } var table = document.createElement("table"); table.setAttribute("id", "multiplicationTable"); tableDiv.appendChild(table); // create header row var newRow = document.createElement("tr"); table.appendChild(newRow); // create headers in header row var newHeader = document.createElement("th"); newHeader.setAttribute("class", "outer-cell"); newRow.appendChild(newHeader); for (let x = col_min; x <= col_max; x++) { newHeader = document.createElement("th"); newHeader.setAttribute("class", "outer-cell"); newHeader.textContent = x; newRow.appendChild(newHeader); } // start filling up rows for (let y = row_min; y <= row_max; y++) { // create new row newRow = document.createElement("tr"); table.appendChild(newRow); // add items to row let newCell = document.createElement("td"); newCell.textContent = y; newCell.setAttribute("class", "outer-cell"); newRow.appendChild(newCell); for (let x = col_min; x <= col_max; x++) { newCell = document.createElement("td"); newCell.textContent = x * y; newCell.setAttribute("class", "inner-cell"); newRow.appendChild(newCell); } } } getUserInput();
table{ border-collapse: collapse; font-family: Sans-Serif; text-align:right; } th,td{ border:2px solid black; padding: 0.5em; margin:0; } th.outer-cell, tr td:first-child{ background:black; color:white; border-color:white; }
<div id="table-placeholder"></div>
Please try this code, To How to customize table cells in a table
<html>
<head>
<title>Multiplication Table</title>
<script type="text/javascript">
var rows = prompt("How many rows for your multiplication table?");
var cols = prompt("How many columns for your multiplication table?");
if(rows == "" || rows == null)
rows = 10;
if(cols== "" || cols== null)
cols = 10;
createTable(rows, cols);
function createTable(rows, cols)
{
var j=1;
var output = "<table border='1' width='500' cellspacing='0'cellpadding='5'>";
for(i=1;i<=rows;i++)
{
output = output + "<tr>";
while(j<=cols)
{
output = output + "<td>" + i*j + "</td>";
j = j+1;
}
output = output + "</tr>";
j = 1;
}
output = output + "</table>";
document.write(output);
}
</script>
</head>
<body>
</body>
</html>
I hope this code will be useful to you.
Thank you.
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.