Formatting A Table Generated With An Array In JavaScript

Question

I can't seem to figure out what I should be doing here. I've created a code block for testing, that generates a table based off of some random numbers and input from the user(this will come later and is not present in the current code block). The random numbers are generated and stored in variables that are then kept in a two dimensional array.

I've figured out how to generate a simple table using two for loops and document writing, however i would like to format the end result with a border and some interior padding. I cannot figure out to do this.

Code:

<!DOCTYPE html>
<html>

<head>
  <title>Test</title>
  <link href="styles.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Raleway&display=swap&" rel="stylesheet">
  <script>
    function main() {
      var x = 10; // 2 decimals
      var b1 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var b2 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var b3 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var b4 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var b5 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var s1 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var s2 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var s3 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var s4 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var s5 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var n1 = "Newman"
      var n2 = "Sally"
      var mainArr = [
        [n1, b1, b2, b3, b4, b5],
        [n2, s1, s2, s3, s4, s5]
      ];

      document.write("<table>")
      document.write("<tr><td>Employee</td><td>Monday</td><td>Tuesday</td><td>Wednesday</td><td>Thursday</td><td>Friday</td>")

      for (var i = 0; i < mainArr.length; i++) {
        var arrInd = mainArr[i];
        document.write("<tr>")
        for (var j = 0; j < arrInd.length; j++) {
          document.write("<td>" + mainArr[i][j] + "</td>");
        }
      }
      document.write("</table>")
    }
  </script>
</head>

<body onload="main()">
</body>

</html>

I have looked on Stack already, as-well-as several other sites, and while the information presented seems to make sense, I haven't had luck trying to integrate code from them, into my code. Ex: document.CreateElement("table") and so forth. It seems like it should work, however as has been the trend with most of my questions on Stack thus far, I think I may be having a hard time understanding the logic of how it works.

tl;dr: I would like help formatting the table generated with the above code, specifically a simple border and some cell interior padding.

Thanks in advance.

This code works. If this isn't the code you're having trouble with, post the code your question is really about. — Barmar
– Barmar, Commented Jul 18, 2019 at 3:38
You can use CSS to style the table, you don't need any changes to this code. — Barmar
– Barmar, Commented Jul 18, 2019 at 3:38
However, you should read Why is document.write considered bad practice — Barmar
– Barmar, Commented Jul 18, 2019 at 3:39
I understand the code works to generate a table. I'm asking about how to format the table while or after it has been generated. — Dev-MDW2
– Dev-MDW2, Commented Jul 18, 2019 at 3:39

Barmar · Accepted Answer · 2019-07-18 03:45:10Z

Add CSS to your page.

Since you're rewriting the page in main(), you have to add the CSS with document.write() as well. It would be better if you learned how to modify the DOM.

<!DOCTYPE html>
<html>

<head>
  <title>Test</title>
  <link href="styles.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Raleway&display=swap&" rel="stylesheet">
  
  <script>
    function main() {
      var x = 10; // 2 decimals
      var b1 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var b2 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var b3 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var b4 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var b5 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var s1 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var s2 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var s3 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var s4 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var s5 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var n1 = "Newman"
      var n2 = "Sally"
      var mainArr = [
        [n1, b1, b2, b3, b4, b5],
        [n2, s1, s2, s3, s4, s5]
      ];

      document.write("<table>")
      document.write("<tr><td>Employee</td><td>Monday</td><td>Tuesday</td><td>Wednesday</td><td>Thursday</td><td>Friday</td>")

      for (var i = 0; i < mainArr.length; i++) {
        var arrInd = mainArr[i];
        document.write("<tr>")
        for (var j = 0; j < arrInd.length; j++) {
          document.write("<td>" + mainArr[i][j] + "</td>");
        }
      }
      document.write("</table>")
      document.write(`<style>
  table, th, td {
 border: 1px solid black;
}
</style>`);
    }
  </script>
</head>

<body onload="main()">
</body>

</html>

TechnicalViking · Accepted Answer · 2019-07-18 03:59:09Z

I altered this code to create a black border around your table. document.write("<table style='border: 1px solid black'>")

If you want more then you can do the same for each block created in your tr or td element

<!DOCTYPE html>
<html>

<head>
  <title>Test</title>
  <link href="styles.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Raleway&display=swap&" rel="stylesheet">
  <script>
    function main() {
      var x = 10; // 2 decimals
      var b1 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var b2 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var b3 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var b4 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var b5 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var s1 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var s2 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var s3 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var s4 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var s5 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var n1 = "Newman"
      var n2 = "Sally"
      var mainArr = [
        [n1, b1, b2, b3, b4, b5],
        [n2, s1, s2, s3, s4, s5]
      ];

      document.write("<table style='border: 1px solid black'>")
      document.write("<tr><td>Employee</td><td>Monday</td><td>Tuesday</td><td>Wednesday</td><td>Thursday</td><td>Friday</td>")
      //const tbody = document.getDocumentById("<tbody>")
      //tbody.setAttribute("style", "border: 1px solid blue;")
      for (var i = 0; i < mainArr.length; i++) {
        var arrInd = mainArr[i];
        document.write("<tr>")
        for (var j = 0; j < arrInd.length; j++) {
          document.write("<td>" + mainArr[i][j] + "</td>");
        }
      }
      document.write("</table>")
    }
  </script>
</head>

<body onload="main()">
</body>

</html>

Collectives™ on Stack Overflow

Formatting A Table Generated With An Array In JavaScript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related