javascript读取到的数据信息怎么显示到html表格中？？？

Javascript读取到的数据信息怎么显示到html表格中？？？先说说我运行的环境：linux嵌入式系统（ARM），所以对ASP、ASP.NET、JSP、JAVA都无法支持（PHP好像可以支持但没有去研究了），所以我采用的就只有HTML和JavaScript了。当我在HTML里点击查询按钮时，通过调用OCX控件将linux嵌入式系统里的数据信息读出来并写入到电脑的C盘的一个文本文件里（这是接口已做好没法改的），然后用JavaScript打开此文件再将信息读出来，并显示到HTML里的表格里。现在就是不知道怎么将数据信息显示到表格里，因为不像ASP.NET里有“数据表格”之类的控件可以很轻松实现。
我也有百度了一些解决方法，有说将表格里的TD设置一个ID名称，然后对每一个ID进行赋值，可是我查询到的记录可能是几百或几千条的，所以一是无法确定有多少条记录不知道预设表格有多少行，二是就算知道有多少行，一个一个的将TD设置一个名称也是一件不可想像的事情。所以请问大侠们有没有什么好的方法来实现，小弟刚接触WEB这块，望多多指教，请谢过了。

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

补充一点，我从文本文件里读到数据信息后，我会处理分配给一个数组，然后想给对应的每个表格里的字段赋值，如：
name   age   class
张三    25     1班
李四    30     2班另外就是我只能用HTML里的table来实现吗？
给你一段代码，你自己琢磨去吧。
jQuery.post('CaseMain/GetListLiAnShenPiALL.ashx', { kind: 1, startindex: 1, pagesize: 17 }, function (data) {
                var obj = JSON.parse(data);
                var str = new Array();
                str.push('<table id="mytable" cellspacing="0">');
                //str.push('<div style="text-align:center;"><span  style="margin-left: 10px;"><input type="button" id=""  onclick="DeleteLiAnChenPi();" value="删除"/></span><span  style="margin-left: 50px;"><input type="button" id="" onclick="GetList(1);" value="查询全部数据"/></span><span  style="margin-left: 50px;"><input type="button" id="" onclick="addNormal();" value="办理新案"/></span><span  style="margin-left: 50px;"><input type="button" id="" onclick="getNewwidow();" value="刷新"/></span></div>');
                str.push("<style type='text/css'>.titlezj{ width:100%; height:38px; color:#073b77; font-size:12px; font-weight:normal; text-align:center; margin:2px; margin-bottom:3px; background-color:#c6d9f4;}.titlezj a{     height:38px;    text-decoration:none; color:#073b77; text-align:center; font-size:12px; font-weight:normal; line-height:38px; _line-height:38px;}.btn{ border:none; background-color:#c6d9f4;}.divleft{ float:left; width:30%; height:38px; _line-height:38px; line-height:38px; text-align:left; background-color:#c6d9f4; margin-bottom:3px;}/*.divleft img{ padding:5px; }*/.divright{ float:right; width:70%; height:38px; line-height:38px; _line-height:38px; text-align:right; background-color:#c6d9f4; margin-bottom:3px;}</style><div class='titlezj'><div class='divleft'>    <img src='images/tt.png' width='12' height='12' /> 管理用户</div><div class='divright'><img src='images/01.png' width='16' height='16' /> <input type='button' class='btn' id='input' onClick='DeleteLiAnChenPi();' value='删除'/>    <img src='images/02.png' width='16' height='16' /> <input type='button' class='btn' id='' onclick='GetList(1);' value='查询全部数据'/>    <img src='images/03.png' width='16' height='16' /> <input type='button' class='btn' id='' onclick='addNormal();' value='办理新案'/>    <img src='images/04.png' width='16' height='16' /> <input type='button' class='btn' id='' onclick='getNewwidow();' value='刷新'/>      </div></div>");
                str.push('<tr><th scope="col">序号</th><th style="display:none;">serialize</th><th scope="col">立案编号</th><th scope="col">立案登记人</th><th scope="col">立案时间</th><th scope="col">违法当事人</th><th scope="col" style="display:none;">案由</th><th scope="col">案件来源</th><th scope="col" style="display:none;">违法事实</th><th scope="col" style="display:none;">承办人意见</th><th scope="col" style="display:none;">承办部门意见 </th><th scope="col" style="display:none;">法制机构审核意见</th><th scope="col" style="display:none;">主管局长意见</th><th scope="col">备注</th><th style="display:none;">签名编号</th><th style="display:none">流程数字编号</th><th style="display:none">最后一个流程代号</th></tr>');
                for (var i = 0; i < obj.length; i++) {
                    str.push('<tr id="number' + (i + 1) + '" onmouseover="ChangeColor(this,1);"  onclick="GetFlow(this);" ondblclick="GetEndNode(this);" onmouseout="ChangeColor(this,2);"><td>' + (i + 1) + '</td><td style="display:none;">' + obj[i].XTAJBH + '</td><td>' + '(' + obj[i].WSBH1 + '年）孟规处批字第' + obj[i].WSBH2 + '号' + '</td><td>' + obj[i].LADJR + '</td><td>' + obj[i].LADJSJ + '</td><td>' + obj[i].WFDSR + '</td><td style="display:none;">' + obj[i].AY.substring(0, 10) + '</td><td>' + obj[i].AJLY.substring(0, 10) + '</td><td style="display:none;">' + obj[i].WFSS.substring(0, 10) + '</td><td style="display:none;">' + obj[i].CBRYJ.substring(0, 10) + '</td><td style="display:none;">' + obj[i].CBBMYJ.substring(0, 10) + '</td><td style="display:none;">' + obj[i].FZJGSHYJ.substring(0, 10) + '</td><td style="display:none;">' + obj[i].ZFJGLDYJ.substring(0, 10) + '</td><td>' + obj[i].BZ.substring(0, 5) + '</td><td style="display:none">' + obj[i].QMBH + '</td><td style="display:none">' + obj[i].SJLZLJ + '</td><td  style="display:none">' + obj[i].DQJD + '</td></tr>');
                }
                //<input type="text" id="wfdsr" readonly="readonly" style="border:none;" value=' + obj[i].WFDSR + ' />
                str.push('</table>');                document.getElementById("main").innerHTML = str.join('');
                //(data);*/            });
循环添加
  //获得表格对象table
  var table = document.getElementById("table的id") ;
  for(var i=0;i<datas.length;i++){ //datas假设的数据源（即：你说的数据信息）
    var row = table.inserRow() ; //给表格追加新行
     var data = datas[i] ; //数据信息里面的一行数据
     row.insertCell().innerText = data.... // row.insertCell()表示追加新的单元格 innerText 表示设置该单元格的文本值；data...表示文本值（如何从数据信息里面获取单元格的值，自己根据数据信息的格式去获取）
     row.insertCell().innerText = data....
     row.insertCell().innerText = data....
     row.insertCell().innerText = data....
     row.insertCell().innerText = data....
     row.insertCell().innerText = data....
     ......
  }
非常感谢 agui54762和soonfei
由于我对于JQuery了解得不多，感觉目前对于我来说还是agui54762给出的相对更容易理解。
非常感谢
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<table id="table">
<thead>
<tr>
      <th>name</th>
      <th>age</th>
      <th>class</th>
    </tr>
    </thead>
<tbody>

</tbody>
</table>
<script type="text/javascript">
var table = document.getElementById('table'),
tbody = table.getElementsByTagName('tbody')[0];
var colType = ['name', 'age', 'class'];
var tr = document.createElement('tr');
for(var i = 0; i < colType.length; i++){
var td = document.createElement('td');
td.className = colType[i];
tr.appendChild(td);
}
var data = [
{
"name": "张三 ",
"age": "25",
"class": "1班"
},
{
"name": "李四",
"age": "30",
"class": "2班"
}
];
for(var i in data){
var _tr = tr.cloneNode(true);
var tds = _tr.children;
for(var j in tds){
var td = tds[j];
td.innerHTML = data[i][td.className];
}
tbody.appendChild(_tr);
}
</script>
</body>
</html>
这样应该看得清楚些，逻辑挺简单的，就不写注释了<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<table id="table">
<thead>
<tr>
      <th class="name">姓名</th>
      <th class="age">年龄</th>
      <th class="class">班级</th>
    </tr>
    </thead>
<tbody>

</tbody>
</table>
<script type="text/javascript">
var data = [
{
"name": "张三 ",
"age": "25",
"class": "1班"
},
{
"name": "李四",
"age": "30",
"class": "2班"
}
];
var table = document.getElementById('table'),
tbody = table.getElementsByTagName('tbody')[0],
thead = table.getElementsByTagName('thead')[0],
ths = thead.getElementsByTagName('th');
var colType = [];
for(var i = 0; i < ths.length; i++){
colType.push(ths[i].className);
}
for(var i in data){
var tr = tbody.insertRow(-1);
for(var j in colType){
td = tr.insertCell(-1);
var type = colType[j];
td.className = type;
td.innerHTML = data[i][type];
}
}
</script>
</body>
</html>
请问一下，agui54762 这样动态增加的TD单元格的的一些属性怎么设置呢？
如：align = "center";
TD的高，背景，网格颜色这些怎么设置？