我试图使用HTML和JavaScript创建10X10表,但发现该表无法正常工作,任何人都可以找到错误。
HTML代码:

<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>

07-24 09:50
查看更多