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

前端之家收集整理的这篇文章主要介绍了JS 动态创建Table,Tr,Td并赋值的简单示例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
修改
要求主题列表随成果类型改变而改变
网上查询资料后开工,在成果类型下拉框添加change()事件触发Dwr,查询主题集合——动态创建/编辑Table
JS部分: 经测试代码如下:

/**
 * 动态创建Table,Tr,Td并赋值
 *
 * @param 
 * @arrange (512.笔记) 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>
原文链接:https://www.f2er.com/js/527774.html

猜你在找的JavaScript相关文章