Mám funkciu v JS, ktorá vygeneruje novú tabulku. Chcem to mať v rámci div elementu. Mám CSS štýl, a chcem aby sa aplikoval na moju novo vygenerovanú tabulku v ramci divu. Tabulka sa mi zobrazí, ale CSS štýl sa neaplikuje vôbec, ako to opraviť?
Ak to nejde nastaviť cez JS, dá sa t nejako inak, aby to za každú cenu fungovalo?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999.xhtml" lang="en" xml:lang="en">
<head>
<title>JavaScript Tutorial</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body onload="generateTable()">
<style type="text/css">
#myDiv .tableStyle {display:inline-table; margin:20px; font-size: 18pt; line-height: 22px; padding:0px; border-collapse: collapse; border-spacing:0; font-family:"Times New Roman",Georgia,Serif; border: 2px solid black;}
</style>
<script language="javascript" type="text/javascript">
<!--
function generateTable() {
var numOfRows = Math.pow(2, 4);
var node = document.getElementById("myDiv");
// creates a <table> element and a <tbody> element
var tbl = document.createElement("table");
tbl.setAttribute('class', 'tableStyle'); // tu nastavujem CSS styl ale neaplikuje sa
var tblBody = document.createElement("tbody");
// creating all cells
for (var j = 0; j < numOfRows; j++) {
var row = document.createElement("tr");
for (var i = 0; i < 5; i++) {
var cell = document.createElement("td");
var cellText = document.createTextNode("r:" + j + ",c:" + i);
cell.appendChild(cellText);
row.appendChild(cell);
}
tblBody.appendChild(row);
}
tbl.appendChild(tblBody);
node.appendChild(tblBody);
tbl.setAttribute("border", "2");
}
//-->
</script>
<div id="myDiv"> </div>
</body>
</html>
