JS动态创建Table,Tr,Td并赋值的具体实现
时间:2024-04-10 11:02:39
成果库修改:
要求主题列表随成果类型改变而改变
网上查询资料后开工,在成果类型下拉框添加change()事件触发Dwr,查询主题集合——动态创建/编辑Table
概要代码如下:
JS
//动态获取主题数据
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>
标签:创建,Table,赋值
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
vue实现页面添加水印
2024-05-10 14:19:59
![](https://img.aspxhome.com/file/2023/6/126406_0s.jpg)
Python中免验证跳转到内容页的实例代码
2021-03-27 11:19:55
![](https://img.aspxhome.com/file/2023/8/99478_0s.png)
cordova+vue+webapp使用html5获取地理位置的方法
2024-04-27 16:00:05
![](https://img.aspxhome.com/file/2023/5/133055_0s.jpg)
PHP易混淆知识整理笔记
2023-06-10 04:34:22
Python利用Scrapy框架爬取豆瓣电影示例
2022-04-30 15:16:17
![](https://img.aspxhome.com/file/2023/3/86253_0s.png)
用户体验的时间尺度[译]
2009-10-30 18:25:00
![](https://img.aspxhome.com/file/UploadPic/200910/30/20091030182732207s.jpg)
python随机生成大小写字母数字混合密码(仅20行代码)
2021-04-03 23:28:47
python密码学RSA算法及秘钥创建教程
2022-03-20 04:02:34
![](https://img.aspxhome.com/file/2023/3/97253_0s.jpg)
Python列表切片常用操作实例解析
2023-12-18 03:47:54
![](https://img.aspxhome.com/file/2023/1/128631_0s.png)
perl生成特定碱基比例的随机序列的代码
2023-12-08 05:27:07
使用Python爬虫爬取小红书完完整整的全过程
2022-03-23 05:12:44
![](https://img.aspxhome.com/file/2023/4/114534_0s.png)
Vue组件的使用及个人理解与介绍
2024-05-09 15:13:52
php进程daemon化的正确实现方法
2023-10-01 09:14:09
Python入门教程(十)Python布尔值介绍
2022-06-01 18:01:55
![](https://img.aspxhome.com/file/2023/1/81521_0s.png)
Javascript遍历Html Table示例(包括内容和属性值)
2024-05-22 10:40:53
社会化音乐:在夹缝中生出花来
2009-08-24 12:37:00
![](https://img.aspxhome.com/file/UploadPic/20098/24/0908-music-flower-01-18s.jpg)
mysql时间相减如何获取秒值
2024-01-19 17:04:10
![](https://img.aspxhome.com/file/2023/0/69770_0s.png)
JavaScript实现网页动态生成表格
2024-04-16 09:24:00
![](https://img.aspxhome.com/file/2023/2/136692_0s.jpg)
python遍历迭代器自动链式处理数据的实例代码
2022-04-12 18:38:29
![](https://img.aspxhome.com/file/2023/6/93786_0s.png)
IE window对象介绍
2008-05-21 18:47:00