Reputation: 59
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
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
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
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