JS动态创建Table,Tr,Td并赋值

JS动态创建Table,Tr,Td并赋值。

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

//动态获取主题数据 
function getzts(){ 
parentId = document.getElementById("bselect1").value; 
if(parentId!=""){ 
dwrMethod.getZtList(parentId,callback5); 
}else{ 
//清空主题Table的数据 www.jbxue.com 
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 = ""+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>

转载于:https://www.cnblogs.com/cfinder010/p/3252191.html