表格:JavaScript 不起作用

TABLES: JavaScript Not Working

本文关键字：不起作用 JavaScript 表格      更新时间：2023-09-26

我试图使用 HTML 和 JavaScript 创建一个 10X10 表，发现它不起作用，任何人都可以找到错误......网页代码：

<head>
<script type="text/javascript" src="grid.js"></script>
<link rel="stylesheet" href="grid.css" type="text/css"  />
 <title>GameOFLife</title>
 </head>
 <body onload="createTable()">
 </body>

JavaScript 代码：

function createTable(){
var body = document.getElementsByTagName('body');
body.innerHTML('<table id="table"></table>');
var table = document.getElementById('table');
for(var i = 0 ; i<10 ; i++){
      table.innerHTML('<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>');
 }
   var td = document.getElementsByTagName('td')
   td.style.width = 10+'px';
   td.style.height = 10+'px';
   td.style.margin = 0+'px';
   td.style.padding = 0+'px';
   td.style.border = 1+'px'+' solid black'  ;
  }

试试这个：你的主要错误是getElementsByTagName（）返回一个数组，所以你需要获取它返回的数组中的第一个元素。

   <script type="text/javascript">
       function createTable(){
           var body = document.getElementsByTagName('body');
           body[0].innerHTML = '<table id="table"></table>';
           var table = document.getElementById('table');
           for(var i = 0 ; i<10 ; i++){
              table.innerHTML += '<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td> </td><td></td><td></td> </tr>';
           }
           var tds = document.getElementsByTagName('td')
           for(var j = 0; j < tds.length; j++){
               tds[j].style.width = 10+'px';
               tds[j].style.height = 10+'px';
               tds[j].style.margin = 0+'px';
               tds[j].style.padding = 0+'px';
               tds[j].style.border = 1+'px'+' solid black'  ;
           }
      }
</script>

function str_repeat ( input, multiplier )
{
  var buf = '';
  while (multiplier)
  {
    if (multiplier & 1) buf += string;
    string += string;
    multiplier >>= 1;
  }
  return buf;
}
var row = '<tr>' + str_repeat('<td></td>', 10) + '</tr>';
var tbl = '<table>' + str_repeat(row, 10) + '</table>';
var table = document.createElement('table');
table.innerHTML = tbl;
document.body.appendChild(table);

或更好（更具可读性和可维护性）

var table = document.createElement('table');
var row, cell, i, j;
for(i=0; i<10; i++) {
  row = document.createElement('tr');
  for(j=0; j<10; j++) {
    cell = document.createElement('td');
    cell.style = {border: '1px solid silver'};
    row.appendChild(cell);
  }
  table.appendChild(row);
}
document.body.appendChild(table);

我会使用document.write() 

function createTable(){
    	document.write('<table id="table">');
    	for(var i = 0 ; i<10 ; i++){
    		document.write('<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>');
    	}
    	document.write('</table>');
    	document.write("<style>td { width : 10px; height : 10px; margin : 0px; padding : 0px; border : 1px solid black;}</style>");
    }
<body onload="createTable()">
</body>

相关文章：