如何自定义表格中的表格单元格

Question

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);
      }
    }
}

Answer 1

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>

Answer 2

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.