Question

目前我正在使用此代码在Javascript中创建动态表，但我不知道如何将数组中的数据添加到此单元格中？

我正在使用以下代码：

   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
.mytable {
border:1px solid #000000;
border-collapse:collapse;
width:200px;
}
.mytable td{
background:#cccccc;
border:1px solid #000000;
}
</style>

<script type="text/javascript">
onload=function(){
var nrCols=1;
var maxRows=10;
var nrRows=maxRows+1;
var news=new Array();
while(nrRows>maxRows){
news[0]="one";
nrRows=Number(prompt('How many rows? Maximum '+maxRows+' allowed.',''));
}
var root=document.getElementById('mydiv');
var tab=document.createElement('table');
tab.className="mytable";
var tbo=document.createElement('tbody');
var row, cell;
for(var i=0;i<nrRows;i++){
    row=document.createElement('tr');
    for(var j=0;j<nrCols;j++){
        cell=document.createElement('td');
        cell.appendChild(document.createTextNode(news[0]));
        row.appendChild(cell);
    }
    tbo.appendChild(row);
}
tab.appendChild(tbo);
root.appendChild(tab);
}
</script>
</head>
<body>
<div id="mydiv" style="width:300 px;height:100 px overflow:scroll"></div>
</body>
</html>

enter image description here

Answer 1

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <style type="text/css">
    .mytable {
    border:1px solid #000000;
    border-collapse:collapse;
    width:200px;
    }
    .mytable td{
    background:#cccccc;
    border:1px solid #000000;
    }
    </style>

    <script type="text/javascript">
    onload=function(){
      var maxRows = 10
      var news=new Array();
      news =  ['Sports','news','international','vehicle','business']

      nrRows=Number(prompt('How many rows? Maximum '+maxRows+' allowed.',''));
      var root=document.getElementById('mydiv');

      if (nrRows <= maxRows) {
         var tab=document.createElement('table');
         tab.className="mytable";
         var tbo=document.createElement('tbody');
         var row, cell;
         for(var i=0;i<nrRows;i++){
            row=document.createElement('tr');
            row.appendChild(document.createTextNode(news[i]));

            tbo.appendChild(row);
        }
      tab.appendChild(tbo);
      root.appendChild(tab);
     }
     else {
      root.innerHTML = 'max rows exceeded'

     }
   }
    </script>
    </head>
    <body>
    <div id="mydiv" style="width:300px;height:100px overflow:scroll"></div>
    </body>
    </html>

如何动态地将数组中的数据添加到表格单元格？

1 个答案: