0
139
ViewsOrder dynamically created html table using JavaScript like snakes and ladders game
I have created a table using javascript and HTML. The table has 50 cells. The cells begin at 50 and end at 1. This is what it looks like now and my code:
I am creating a snakes and ladders game. So 1 needs to begin on the left bottom corner and so on like this:
Is there a way to do this easily or do I need to program each row myself the way I want it?
This is my code so far:
Html:
<html>
<head>
<script>
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'style.css';
document.getElementsByTagName('HEAD')[0].appendChild(link);
</script>
</head>
<html lang="en">
<body>
<div>
<button id="selectbtn" type="button" >Create </button>
<button id="btnMove" type="button" >move to ?</button>
</div>
<div id="myDynamicTable">
</div>
</body>
</html>
Script:
document.getElementById("selectbtn").addEventListener("click", addTable);
function addTable() {
document.getElementById("selectbtn").hidden=true;
var myTableDiv = document.getElementById("myDynamicTable");
var table = document.createElement('TABLE');
table.border='1';
//table.className = "table";
var tableBody = document.createElement('TBODY');
table.appendChild(tableBody);
var n = 50;
var even = true;
for (var i=0; i<5; i++){
var tr = document.createElement('TR');
tableBody.appendChild(tr);
for (var j=0; j<10; j++){
var td = document.createElement('TD');
td.width='75';
td.height = '75';
td.id = n;
if(even){
td.className = "even"
even = false
}
else{
td.className = "odd"
even = true
}
var img = document.createElement('img');
img.id = "img"+n;
td.appendChild(img);
td.appendChild(document.createTextNode(n));
tr.appendChild(td);
n--;
}
}
myTableDiv.appendChild(table);
}
Thank you in advance
·
Juan Pablo Isaza
Answer question