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 = "<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>

JS动态创建Table,Tr,Td并赋值的更多相关文章

  1. JS动态创建table

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  2. js 动态添加Table tr,选中与不选中checkbox行数NO的变化

    首次加载进入页面,如图: 注:Table是在js中拼接字符串循环动态添加的(拼接字符串,详见之前随笔) 点击Line2 checkbox后,效果如图: 实现的效果就是: 点击checkbox — 显示 ...

  3. 初探原生js根据json数据动态创建table

    初探原生js根据json数据动态创建table 小生以实习生的职位进入了一家非纯软件的公司做asp.net开发,大半个月下来发现公司里居然没有前端工程师,这令我很诧异,跟着公司做项目,发现前端后台没有 ...

  4. js基础例子动态创建table实例

    <style> table{ width:500px; font-weight: bold; border: 1px solid #000; border-collapse:collaps ...

  5. js动态给table添加/删除tr的方法

    js动态给table添加/删除tr的方法. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> ...

  6. js动态创建表格,删除行列的小例子

    js动态创建表格,删除行列的实例代码. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  7. Jquery 实现动态加入table tr 和删除tr 以及checkbox的全选 和 获取加入TR删除TR后的数据

    关于jquery实现动态加入table tr的问题我也不多说了 上面代码非常多地方都有凝视的 关于返回的 编辑后的table 数据 我这里想说的是我直接把他保存成一个连接起来的字符串了 格式 str= ...

  8. jQuery操作Table tr td常用的方法

    虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便的,下面汇总了jQuery操作Table tr td常用的方法,熟记这些操作技巧,下 ...

  9. 汇总常用的jQuery操作Table tr td方法

    虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便的,下面汇总了jQuery操作Table tr td常用的方法,熟记这些操作技巧,下 ...

随机推荐

  1. Oracle综合数据库管理命令集

    sqlplus SANKYU/SANKYU@ORADB_192.168.25.235 cmd: exp .......(最后不要加;号)--sankyuexp SANKYU/SANKYU@SUNNY ...

  2. C#.NET常见问题(FAQ)-如何给Listbox添加右键菜单

    1 拖一个ContextMenuStrip控件,然后可以直接在界面上编辑,也可以在FormLoad的时候动态添加   2 把这两个控件关联起来就可以实现listBox1的右键菜单跟ContextMen ...

  3. 使用Yii 1.1框架搭建第一个web应用程序

    我已经安装好了WampServer,web项目根目录是 D:\wamp\www. 1.下载Yii 1.1的源码 yii-1.1.14.f0fee9.tar.gz: 2.解压源码包,放在web项目的根目 ...

  4. Succession

    Description The king in Utopia has died without an heir. Now several nobles in the country claim the ...

  5. Struts2(八)访问Servlet API

    一.Struts2中的Servlet API 1.1.struts2的Action实现了MVC中C层的作用 针对请求用户显示不同的信息 登录后段保存用户信息 ----session 保存当前在线人数等 ...

  6. 在网页浏览器中原生显示PDF文件

    在网页中直接显示pdf格式的文件方便阅读.但是如果文件较大加载速度会很慢,另外如果客户端没有安装pdf阅读插件的话,也就看不了了. 这种方式的好处就是不需要转换,直接显示,而且在加载时(高级的浏览器, ...

  7. 虚拟机安装的Winserver 2008 R2系统,宿主机无法ping通主机

    新安装的虚拟机,在虚拟机中安装了Winserver2008 R2系统,网络适配器已经设置为桥接模式(自动) 刚开始的几天很正常,但是过了几天后,发现连接不了了,后来才发现是因为网络问题. 解决方案:修 ...

  8. JUC-闭锁:CountDownLatch

    CountDownLatch::闭锁,在完成某些运算是,只有其他所有线程的运算全部完成,当前运算才继续执行. 实例化:参数:设置一个计数器的值. final CountDownLatch latch ...

  9. LeetCode(35):Palindrome Number

    Determine whether an integer is a palindrome. Do this without extra space. Some hints: Could negativ ...

  10. 【微信小程序】:评论、回复和删除功能 -- 2017/7/14

    1.理论核心:传参->pid,评论父id需要在wxml页面传递:小程序端和WEB端不同核心:前者操纵数据,后者操纵DOM元素对象 2.不废话,直接代码:wxml <view class=& ...