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. 免费素材-Helium (AI, EPS, SVG, Icon Font)

    在线演示 在线演示 本地下载 我很高兴和大家分享今天的素材-Helium.它有多种格式可供下载(AI, EPS, SVG, Icon Font) ,内容包含曲线.飞行器.上传下载.喇叭等类型.

  2. WIN7使用技巧 让电脑变身WiFi热点,让手机、笔记本共享上网,如何开启无线网络,共享无线网络

    将win7电脑变身WIFI热点,让手机.笔记本共享上网 用win7建立无线局域网,可以共享上网可以局域网游戏. 开启windows 7的隐藏功能:虚拟WIFI和SoftAP(即虚拟无线AP),就可以让 ...

  3. 字符串的公共前缀对Mysql B+树查询影响回溯分析

        年前项目组接微信公众号. 上线之后,跟微信相关的用cid列的查询会话的SQL变慢了几十倍!思考这个问题思考了非常久.从出现以来一直是我心头的一个结.cid这一列是建了索引的,普通的cid列更新 ...

  4. 跨站点脚本编制-XSS 描述及解决方法

    跨站点脚本编制可能是一个危险的安全性问题,在设计安全的基于 Web 的应用程序时应该考虑这一点.本文中,描述了这种问题的本质.它是如何起作用的,并概述了一些推荐的修正策略. 当今的大多数网站都对 We ...

  5. PHP高级教程-文件上传

    PHP 文件上传 通过 PHP,可以把文件上传到服务器. 本章节实例在 test 项目下完成,目录结构为: test |-----upload # 文件上传的目录 |-----form.html # ...

  6. vue Watcher分类 computed watch

    1.Watcher构造函数源码部分代码 if (options) { this.deep = !!options.deep this.user = !!options.user this.lazy = ...

  7. SQL 2008 R2数据库变为REPLICATION,日志不断增长并且不能截断和收缩的解决方式

     执行环境:windows server2003,sql server2008 R2,数据库上布置CDC   用户反应系统报错是日志已满,系统不能执行. 查看日志文件时.发现日志文件已经达到15G ...

  8. 使用Python创建MySQL数据库实现字段动态添加以及动态的插入数据

    应用场景: 我们须要设计一个数据库来保存多个文档中每一个文档的keyword. 假如我们每一个文档字符都超过了1000,取当中出现频率最大的为我们的keyword. 如果每个文档的keyword都超过 ...

  9. 使用 Scrapy 构建一个网络爬虫

    来自weixin 记得n年前项目需要一个灵活的爬虫工具,就组织了一个小团队用Java实现了一个爬虫框架,可以根据目标网站的结构.地址和需要的内容,做简单的配置开发,即可实现特定网站的爬虫功能.因为要考 ...

  10. JSTL不同版本和EL表达式的关联

    JSTL目前有3个版本:JSTL1.0.JSTL1.1.JSTL1.2 JSTL1.0和JSTL1.1包含jstl.jar和standard.jar这2个jar包,在j2ee4的版本中是需要单独引用这 ...