JS 动态创建Table,Tr,Td并赋值的简单示例

这篇文章主要为大家详细介绍了JS 动态创建Table,Tr,Td并赋值的简单示例，具有一定的参考价值，可以用来参考一下。

修改：
要求主题列表随成果类型改变而改变
网上查询资料后开工，在成果类型下拉框添加change()事件触发Dwr，查询主题集合——动态创建/编辑Table
JS部分： 经测试代码如下：

/**
 * 动态创建Table,Tr,Td并赋值
 *
 * @param 
 * @arrange (512.笔记) www.q1010.com
 **/
//动态获取主题数据 
function getzts(){ 
parentId = document.getElementById("bselect1").value; 
if(parentId!=""){ 
dwrMethod.getZtList(parentId,callback5); 
}else{ 
//清空主题Table的数据
var t=document.getElementById("zhutiTable"); //获取Table 
var length= t.rows.length; //获得Table下的行数 
if(length!=0){ //如果有行，则清空 
for(var i=length-1;i>=0;i--) 
{ 
t.deleteRow(i); 
} 
} 
var r = t.insertRow(); 
var c = r.insertCell(); 
c.innerHTML="暂无主题列表"; 
document.getElementById('zhutiTable').appendChild(t); 
} 
} 
function callback5(provinces){ 
var t=document.getElementById("zhutiTable"); //获取Table 
var length= t.rows.length; //获得Table下的行数 
if(length!=0){ //如果有行，则清空 
for(var i=length-1;i>=0;i--) 
{ 
t.deleteRow(i); 
} 
} 
if(provinces.length>0){ 
for (var i = 0; i < provinces.length; i++) { 
//tr 
if(i%4==0){ 
var r = t.insertRow(t.rows.length);//创建新的行 
} 
//td 
var c = r.insertCell(); //创建新的列 
c.innerHTML = "<input type='checkbox' name='zhutiIds' value="+provinces[i][0]+">"+provinces[i][1]; 
} 
}else{ 
var r = t.insertRow(); 
var c = r.insertCell(); 
c.innerHTML="暂无主题列表"; 
} 
document.getElementById('zhutiTable').appendChild(t); 
}

html部分： 经测试代码如下：

<tr> 
<td class="add_tit">成果类型</td> 
<td> 
<s:select id="bselect1" name="pruType1" onchange="getzts();"list="pTypeList" listKey="id" listValue="productionTypeName" headerKey="" headerValue="--  请选择 --" /> 
<label class="note4">*</label> 
</td> 
</tr> 
[html]
<tr> 
<td class="add_tit">主题</td> 
<td id="table1" style="padding-left:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;"> 
<table id="zhutiTable" border="0" cellpadding="0" cellspacing="0" width=100% class="table_table"> 
<tr> 
<td style="color: red;">注:请先选择成果类型</td> 
</tr> 
</table> 
</td> 
</tr>

本文来自：http://www.q1010.com/174/567-0.html

注：关于JS 动态创建Table,Tr,Td并赋值的简单示例的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：Table