javascript 动态创建表格的2种方法总结

  第一种方法:

  

复制代码 代码如下:

  <html>

  <head>

  <script>

  function createTable(rows,lines){

  this.rows=rows;

  this.lines=lines;

  var Body=document.getElementById('body');

  var Table=document.createElement('table');//创建table标签元素

  Table.setAttribute('border','1');

  //给table标签添加其他属性

  for(var i=0;i<this.rows;i++){

  var lRow=document.createElement('tr');

  for(var j=0;j<this.lines;j++){

  var textNode=document.createTextNode(i+','+j);

  var lLine=document.createElement('td');

  lLine.appendChild(textNode);

  lRow.appendChild(lLine);

  }

  Table.appendChild(lRow);

  }

  Body.appendChild(Table);

  }

  </script>

  </head>

  <body >

  <div id="body"></div>

  </body>

  <script type="text/javascript">

  createTable(10,10);

  </script>

  </html>

  第二种方法:

  

复制代码 代码如下:

  <script>

  function createTable(rows,lines){

  this.rows=rows;

  this.lines=lines;

  var Body=document.getElementById('body');

  var Table=document.createElement('table');

  Table.setAttribute('border',1);

  for(var i=0;i<this.rows;i++){

  var row=Table.insertRow(i);

  for(var j=0;j<this.lines;j++){

  var cells=row.insertCell(j);

  cells.innerHTML=i+','+j

  }

  }

  Body.appendChild(Table);

  }

  </script>

  以上2种方法小伙伴们是否都了解了呢,如有更好的方法,也请大家留言说明下,大家共同进步。