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. Mapnik读取PostGIS数据渲染图片

    __author__ = 'Administrator' # encoding: utf-8 import sys import datetime import mapnik m = mapnik.M ...

  2. 100款免费的旅游素材(PSD)

    本地下载 素材一直都是网页设计者们大爱,不同的类型和设计总能带给人们新鲜感.今天带来的这100个免费的旅行素材,PSD格式,可以自定义色彩.一定可以带给你们非常惊喜!

  3. Discuz常见大问题-如何在自定义页面使用首页四格

    根据要求把majianjun文件夹放到指定目录 在DIY模式下点击保存后面的小按钮,然后导入XML文件 默认是采集所有版块的数据,你可以保存之后再次DIY,然后设置数据来源和设置标题等信息. 需要注意 ...

  4. ArcGIS Pro体验04——菜单栏

    对菜单栏进行熟悉一下: 1.地图菜单 剪切板(Clipboard):剪切(Cut).复制(Copy).粘贴(Paste),这些不用说了,在ArcMap中是放在"编辑"菜单下面的.当 ...

  5. 去除icon图标特效,阴影,反光

    在icon默认情况: 程序的图标会被apple进行美化, 自动圆角, 加上阴影和反光效果:如果不想要这种效果:在Info.plist中 添加一个Icon already includes gloss ...

  6. webstorm激活+汉化教程

    1.安装教程+激活 输入的激活网址: http://idea.imsxm.com/ 2.汉化教程 软件适用于:webstorm2017.2以及以上,如有需要可直接加本人QQ 1940694428.

  7. PyQt5教程——第一个程序(2)

    用PyQt5写的第一个程序 在这篇PyQt5教程中,我们可以学习一些PyQt5的基础应用. 简单的例子 这是一个显示一个小窗口的简单例子.我们可以做许多这样的窗口.我们可以调整它的窗口尺寸,最大化或最 ...

  8. CSS nth-child、first-child、last-child、nth-of-type、first-of-type和last-of-type选择器使用

    以下示例主要讲解nth-child.first-child.last-child.nth-of-type.first-of-type和last-of-type使用. 示例代码: <!DOCTYP ...

  9. 解决itextpdf行高问题

    解法:PdfPCell.setFixedHeight(value);

  10. Druid register mbean error

    key: [com.alibaba.druid.stat.DruidDataSourceStatManager.addDataSource(DruidDataSourceStatManager.jav ...