javascript 生成动态表格

懒得写，这些东西你完全可以google
如果DOM创建无非 document.createElement(); otbl.insertCell otr.insertRow
或者用innerHTML方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>无标题页</title>
    <script language="javascript" type="text/javascript">
    window.onload=function()
    {
        var table=document.getElementById("tableTest");
        var tbody=table.tBodies[0]; //取得模板部分
        var tplRow=tbody.rows[0];   //取得该tbody的第一行为模板
        tbody.removeChild(tplRow);  //删除该行

        //创建一行
        var row=tplRow.cloneNode(true);     //深层拷贝，相当于复制一行模板
        tbody.appendChild(row);     //加入到表格中
        //设置该行数据
        row.cells["c1"].innerHTML="数据1";
        row.cells["c2"].innerHTML="数据2";
        row.cells["c3"].innerHTML="数据3";
        row.cells["c4"].innerHTML="数据4";

        //创建一行
        row=tplRow.cloneNode(true);     //深层拷贝，相当于复制一行模板
        tbody.appendChild(row);     //加入到表格中
        //设置该行数据
        row.cells["c1"].innerHTML="数据5";
        row.cells["c2"].innerHTML="数据6";
        row.cells["c3"].innerHTML="数据7";
        //row.cells["c4"].innerHTML="数据4";  //如果不设置某格数据，该格子数据则为模板中的数据
    }
    </script>
</head>
<body>
    <table id="tableTest" border="1" width="400">
        
        <thead><tr>
            <th>h1</th>
            <th>h2</th>
            <th>h3</th>
            <th>h4</th>
        </tr></thead>
        

        
        <tbody><tr>
            <td id="c1">a</td>
            <td id="c2">b</td>
            <td id="c3">c</td>
            <td id="c4">dddd</td>
        </tr></tbody>
        
    </table>
</body>
</html>
主要思路就是，取得一个模板行，然后利用cloneNode(true)方法进行深层拷贝，然后加到表格中，再根据格子ID修改数据。
这种方法好处在于，表格的模板你可以用可视化工具进行可视化的设计，包括样式等等。而不是全部用代码来创建，最终显示效果要等运行了才看到。
把这种方法封装成一个类来用，就方便多了。

我以前写了一个是一个链接数据库的js,太长了样式就不给你了
function selectInfo()
{
var rowCount=0;
var tbody=document.getElementById("tobdy");
clearText(tbody);
var con=createConnection();
var rs = new ActiveXObject("ADODB.Recordset");
var sql="select top 5 * from student where stuId not in (select top "+(pageCount*5)+" stuId from student)";
rs.open(sql,con);
while(!rs.EOF)
{
rowCount++;
var tr = document.createElement("tr");

var stuIdTd=document.createElement("td");
var stuNameTd=document.createElement("td");
var stuSexTd=document.createElement("td");
var stuPhoneTd=document.createElement("td");
var stuAddressTd=document.createElement("td");
var stuHandleTd=document.createElement("td");

if(rowCount % 2 == 0)
{
stuIdTd.style.backgroundColor="#ffffff";
stuNameTd.style.backgroundColor="#ffffff";
stuSexTd.style.backgroundColor="#ffffff";
stuPhoneTd.style.backgroundColor="#ffffff";
stuHandleTd.style.backgroundColor="#ffffff";
stuAddressTd.style.backgroundColor="#ffffff";

}

stuIdTd.onmouseover=function(){
onmouseoverFun(this);
}
stuNameTd.onmouseover=function(){
onmouseoverFun(this);
}
stuSexTd.onmouseover=function(){
onmouseoverFun(this);
}
stuPhoneTd.onmouseover=function(){
onmouseoverFun(this);
}
stuAddressTd.onmouseover=function(){
onmouseoverFun(this);
}
stuHandleTd.onmouseover=function(){
onmouseoverFun(this);
}

stuIdTd.onmouseout=function(){
onmouseoutFun(this);
}
stuNameTd.onmouseout=function(){
onmouseoutFun(this);
}
stuSexTd.onmouseout=function(){
onmouseoutFun(this);
}
stuPhoneTd.onmouseout=function(){
onmouseoutFun(this);
}
stuAddressTd.onmouseout=function(){
onmouseoutFun(this);
}
stuHandleTd.onmouseout=function(){
onmouseoutFun(this);
}
var stuImage1=document.createElement("image");
stuImage1.setAttribute("src","image/editb.gif");
stuImage1.setAttribute("title","修改");
stuImage1.onclick=function(){
updateText(this);
}
var stuImage2=document.createElement("image");
stuImage2.setAttribute("src","image/del2.gif");
stuImage2.setAttribute("title","删除");
stuImage2.onclick=function()
{
deleteInfo(this);
}

var stuId=document.createTextNode(rs("stuId"));
var stuName=document.createTextNode(rs("stuName"));
var stuSex=document.createTextNode(rs("stuSex"));
var stuPhone=document.createTextNode(rs("stuPhone"));
var stuAddress=document.createTextNode(rs("stuAddress"));
var stuOther=document.createTextNode(" ");

stuIdTd.appendChild(stuId);

stuNameTd.appendChild(stuName);
stuSexTd.appendChild(stuSex);
stuPhoneTd.appendChild(stuPhone);
stuAddressTd.appendChild(stuAddress);
stuHandleTd.appendChild(stuImage1);
stuHandleTd.appendChild(stuOther);
stuHandleTd.appendChild(stuImage2);

tr.appendChild(stuIdTd);
tr.appendChild(stuNameTd);
tr.appendChild(stuSexTd);
tr.appendChild(stuPhoneTd);
tr.appendChild(stuAddressTd);
tr.appendChild(stuHandleTd);

tbody.appendChild(tr);
rs.moveNext;
}
closeText(rs,con);
}

前段时间写的动态增加、删除、修改的列表项目，我用的是div，不过用table 是一回事，可参考修改，注意：利用了Jquery 1.3，感觉还是比较方便的
var oTravel = {
  from:function(){
    return $("#tbFrom").val();
  },
  to:function(){
    return $("#tbTo").val();
  },
  tool:function(){
    return $("#selType option:selected").text();
  },
  detail:function(){
    return $("#selDetail option:selected").text();

  },
  Add:function(){
    travelId++;

    var str = "";
    str += "<div id='div" + travelId + "'><span style='width:80%'>" + "<img src='http://rbis.rigol.com/rbis/images/groupbox_expand.gif'>" + " 从 <font id='fFrom' color=black>" + oTravel.from() + "</font> 到 ";
    str += "<font id='fTo' color=black>" + oTravel.to() + "</font>";
    str += " 交通工具：<font id='fTool'color=black>" + oTravel.tool() + "</font> <font id='fDetail'color=black>" + oTravel.detail() + "</font></span>";
    str += "<span><img class='pic' src='http://rbis.rigol.com/rbis/images/pencile.gif' title='修改' onclick='oTravel.Upd(this)'>";
    str += "<img class='pic' title='删除' class='del' src='http://rbis.rigol.com/rbis/images/del.gif' id='del"+travelId+"' onclick='oTravel.Del(this)'></span>";
    str += "</div>";
    $("#travelBody").append(str);



  },
  Del:function(obj){
    $(obj).parent().parent().remove();
  },
  Upd:function(obj){
    $(obj).parent().parent().parent().find("div").each(function(){
      $(this).removeClass("selectUpd");
    });
    $("#tbFrom").val($(obj).parent().parent().find("#fFrom").html());
    $("#tbTo").val($(obj).parent().parent().find("#fTo").html());
    var tool = $(obj).parent().parent().find("#fTool").html();
    $("#selType").val(tool);
    linkSelect(tool);

    $("#selDetail").val($(obj).parent().parent().find("#fDetail").html());

    $("#btnAdd").hide();
    $("#btnUpd").show();

    $("#btnUpd").attr("tag",$(obj).parent().parent().attr("id"));

    $(obj).parent().parent().addClass("selectUpd");
  }
};

部分HTML代码
<tr>
<td><div id="travelHead">出发地</td>
<td>
<input name="tbFrom" value="" id="tbFrom"></td>
<td><div id="travelHead">目的地</td>
<td>
<input name="tbTo" value="" id="tbTo"></td>
</tr>
<tr id="trSelect">
<td><div id="travelHead">交通工具</td>
<td>
<select name="selType" id="selType">
<option value="""" selected>
<option value="_c2ersi4trv8_">飞机
<option value="_62etv04tjmk_">火车
<option value="_52f1dc4tklg_">轮船</select>
</td>
<td><div id="travelHead">明细</td>
<td>
<input name="%%Surrogate_selDetail" type="hidden" value="1">
<select name="selDetail" id="selDetail">
<option value="" selected></select>
</td>
<td colspan=4 style="border-top:0px;">
<input id="btnAdd" type="button" value="添加" style="margin-left:40px" onclick="javascript:oTravel.Add()" />
<input id="btnUpd" type="button" value="修改" style="display:none;margin-left:40px" onclick="updTravel(this)" />
</td>
</tr>
<tr>
<td>出差明细</td>
<td colspan=7>
<div id="travelBody">
</div>
</td>
</tr>

调试易

javascript 生成动态表格

解决方案 »