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

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

/**
 * 动态创建Table,Tr,Td并赋值
 *
 * @param 
 * @arrange (编程之家) jb51.cc
 **/
//动态获取主题数据 
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>

相关文章

kindeditor4.x代码高亮功能默认使用的是prettify插件,prett...
这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代...
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小