CODEWITHSUNDEEP
javascripthtmlhtml-table
HTMLnoobcs17001
HTMLnoobcs17001

Reputation: 59

Javascript random generation

I'm trying to make the td and tr do a random number of columns and and rows when the window is refreshed. I am not sure what I am doing wrong with the math here. I haven't use this function before so I know something is not right. 

 <!DOCTYPE html>
<html onmousedown='event.preventDefault();'>
 <head>
 <title> Boxes </title>
 <meta charset='utf-8'>
 <style>

table {
   border-spacing: 6px;
   border: 1px rgb(#CCC);
   margin-top: .5in;
   margin-left: 1in;
 }




   td {
  width: 40px; height: 40px; 
  border: 1px solid black;
  cursor: pointer;
  }



 </style>
 <script>

This function returns a random value between min and max inclusive.

  function R(min, max) {
   var range = Math.abs(max-min)+1;
    return Math.floor((Math.random()*range) + min);
  }
  </script>
 </head>
 <body>
  <table>
  <tbody>
 <tr>
  <td>  <td>  <td>  <td> 
 <tr>
  <td>  <td>  <td>  <td> 
 <tr>
  <td>  <td>  <td>  <td> 
  <tr>
  <td>  <td>  <td>  <td> 
  <script>

Use document.write() and for-loops to make a rows x cols table of empty cells styled according to the rules in the style section. rows and cols should be set to a random number between 4 and 16. Each time the page is re-loaded the table should likely be a different size.

 for(r=4; r<16; r++){
  var row ="td";
 for(c=4; c<16;c++){
  row+="tr";
  }console.log(row);
  }


 </script>
 </tbody>
  </table>
  </body>
   </html>

Upvotes: 2

Views: 873

Answers (3)

SoEzPz
SoEzPz

Reputation: 15922

Table with dynamic rows and columns

Working Example CodePen

var table = document.getElementsByTagName("table")[0];

var randomNum = (function(min, max){
  return function(){
    return Math.floor((Math.random() * (Math.abs(max-min)+1)) + min);
  }
}(4,16))

document.write(createTable(randomNum(), randomNum()));

function createTable(rowCt, colCt){
  var table = "<table>";
  for(var index = 0; index < rowCt; index++){
    table += createRow(colCt);
  }
  return (table + "</table>");
}

function createRow(num){
  return ("<tr>" + createColumns(num) + "</tr>")
}

function createColumns(num){
  var columns = "";
  for(var index = 0; index < num; index++){
    columns += "<td></td>";
  }
  return columns;
}
table {
  border-spacing: 6px;
  border: 1px rgb(#CCC);
  margin-top: .5in;
  margin-left: 1in;
}

td {
  width: 40px; height: 40px; 
  border: 1px solid black;
  cursor: pointer;
  }
<table></table>

Upvotes: 2

RohitS
RohitS

Reputation: 1046

Here in example, i have added the script directly within body to append the required HTML to keep it simple

About your code : well,in your posted snippet you were using console.log() which is used for writing the output to console not on your web page in order to do so you have to add it to Document object (your page) a simple method is to use 

document.write('markup here');

follow this link to know about the write method.

about how rows and cols generated ie. Math.random() * (max - min) + min here is some best explanation 

table {
      border-spacing: 6px;
      border: 1px rgb(#CCC);
    }

td {
    width: 20px; height: 40px; 
    border: 1px solid black;
    cursor: pointer;
  }
<table border="1">
    <script type="text/javascript">
      //Lets first Set Min and max here you want min to 4 and max to 16 so we declare here.
      var min = 4, max =16;
      var row = Math.random() * (max - min) + min;
      var cols = Math.random() * (max - min) + min;
      //lets print someoutput
      for(var i=0;i<row;i++)
      {
        document.write("</tr>"); // we are printing HTML so use tags <tr> not tr
        for(var j=0;j<cols;j++)
        {
          document.write("<td>dummy</td>"); // we are printing HTML so use tags <td> not td
        }
        document.write("</tr>");
      }
  </script>
</table>

Upvotes: 0

Yogesh Mistry
Yogesh Mistry

Reputation: 2152

Your R() function is generating a random number between the passed params. What you were doing is that you were not using that random number to print out the random number of rows / cols.

I've created a function called generateRandomSizedTable, and wrapped your snippet, with corrections, to print out random set of rows and columns and wrap it with a wrapper block called table_wrapper on document.onload.

function R(min, max) {
   var range = Math.abs(max-min)+1;
    return Math.floor((Math.random()*range) + min);
}

function generateRandomSizedTable(){
  var table = "<table>";
  var rows = R(4, 16);
  var cols = R(4, 16);
  for(r=1; r <= rows; r++){
      table += "<tr>";
      for(c=1; c <= cols;c++){
          table+="<td></td>";
      }
      table += "</tr>";
  }
  table += "</table>";
  document.getElementById("table_wrapper").innerHTML = table;
  console.log(table);
}

document.onload = generateRandomSizedTable();
table {
   border-spacing: 6px;
   border: 1px rgb(#CCC);
   margin-top: .5in;
   margin-left: 1in;
}
td {
   width: 40px; height: 40px; 
   border: 1px solid black;
   cursor: pointer;
}
<div id="table_wrapper"></div>

Upvotes: 0

Related Questions