js动态添加table 数据tr td
成果库修改:
要求主题列表随成果类型改变而改变
网上查询资料后开工,在成果类型下拉框添加change()事件触发Dwr,查询主题集合——动态创建/编辑Table
概要代码如下:
Jsp页面
[javascript]
//动态获取主题数据
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>
---------------------------------------------------------------------------------------------我是分割线-----------------------------------------------------------------------------------------------------------
function TbHeartrates()
{
$.post(window.location.href, { "action": "tbHeartrates" }, function (msg) {
if (msg != "") {
alert("");
var obj = eval("(" + msg + ")");
var num = obj.rows.length;
//var aa = document.getElementById('tbheartrates');
$('#tbheartrates').append('<tr><th>测试日期</th><th>测试结果</th><th>正常范围</th> <th>单位</th><th>温馨提示</th><th></th><th></th><th></th><th></th></tr>');
for (var i = ; i < num; i++) {
var trObjs = document.createElement("tr");
trObjs.innerHTML = '<td class="tdfirstline">11月10日</td> <td class="tdsecondline">' + obj.rows[i].JSON_ecg + '</td> <td class="tdthreeline">60-100</td> <td class="tdfourline">次/m</td> <td class="tdfiveline">您的心率低于正常范围</td> <td class="tdsixline"></td> <td class="tdsevenline"></td> <td class="tdeightline"></td> <td class="tdnineline"></td>';
var trObjimg = document.createElement("tr");
trObjimg.innerHTML = ' <td colspan="9"><img src="' + obj.rows[i].JSON_ecgxy + '" style="margin-left:-30px;" /></td>';
$('#tbheartrates').append(trObjs);
$('#tbheartrates').append(trObjimg);
}
}
});
}
js动态添加table 数据tr td的更多相关文章
- js 动态添加Table tr,选中与不选中checkbox行数NO的变化
首次加载进入页面,如图: 注:Table是在js中拼接字符串循环动态添加的(拼接字符串,详见之前随笔) 点击Line2 checkbox后,效果如图: 实现的效果就是: 点击checkbox — 显示 ...
- Js 动态添加的数据,监听事件监听不到
在开发中遇到这种问题,就是有些数据,比如按钮是动态添加进去的,结果添加事件监听无效,直接写死在页面上是可以的. 这就是很明显的加载先后顺序的问题了. 解决的方法: $(document).ready( ...
- js动态给table添加行(tr)
html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> < ...
- JS动态创建Table,Tr,Td并赋值
JS动态创建Table,Tr,Td并赋值. 成果库修改: 要求主题列表随成果类型改变而改变 网上查询资料后开工,在成果类型下拉框添加change()事件触发Dwr,查询主题集合——动态创建/编辑Tab ...
- js动态给table添加/删除tr的方法
js动态给table添加/删除tr的方法. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> ...
- js 动态添加表单 table tr
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- MiniUI动态添加table表格
本文将介绍一下,如何用Jquery MiniUi动态添加一行table表格 1.效果展示 ↓ 2.具体代码 <script type="text/javascript"> ...
- form表单 无法提交js动态添加的表单元素问题。。
第一种情况, 这种情况js动态添加的表单元素是不能提交到服务器端的 <table> <form method="post" action=" url ...
- 使用js动态添加组件
在文章开始之前,我想说两点 1 自己初学js,文章的内容在大神看来可能就是不值一提,但是谁都是从hello world来的,望高 手不吝指教# 2 我知道这个标题起的比较蛋疼,大家看图就能说明问题 ...
随机推荐
- 测试通过Word直接发布博文
这里是来自word 2013的一篇测试文章. 测试直接通过Word自带的bloger功能发布博客文章. 这里插入一张图片
- 自动文档摘要评价方法:Edmundson,ROUGE
自动文档摘要评价方法大致分为两类: (1)内部评价方法(Intrinsic Methods):提供参考摘要,以参考摘要为基准评价系统摘要的质量.系统摘要与参考摘要越吻合, 质量越高. (2)外部评价方 ...
- Apache HTTP Server mod_dav.c 拒绝服务漏洞(CVE-2013-1896)
漏洞版本: Apache HTTP Server < 2.2.25 漏洞描述: CVE ID:CVE-2013-1896 Apache HTTP Server是一款流行的WEB服务器 Apach ...
- Poetize4 创世纪
3037: 创世纪 Time Limit: 5 Sec Memory Limit: 128 MBSubmit: 123 Solved: 66[Submit][Status] Description ...
- -_-#【jsonp】cache
Cache jQuery’s JSONP Calls <script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.3 ...
- 2015第37周二foxmail邮箱客户端迁移
foxmail7.0邮箱客户端迁移风波浪费我下午不少时间,不知为何做完foxmail客户端在卡的时候我将其强制关闭,然后将整个邮箱目录拷贝到一台新电脑上,运行客户端居然我要新建账户(账户信息丢失),将 ...
- hihoCoder 1392 War Chess 【模拟】 (ACM-ICPC国际大学生程序设计竞赛北京赛区(2016)网络赛)
#1392 : War Chess 时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 Rainbow loves to play kinds of War Chess gam ...
- Oracle 11g ORA-12514:TNS:监听程序当前无法识别连接描述符中请求的服务
1. 找到listener.ora监听文件,具体位置:D:\app\Administrator\product\11.2.0\dbhome_1\NETWORK\ADMIN\listener.ora 2 ...
- 高效算法——Bin Packing F - 贪心
Time Limit:3000MS Memory Limit:0KB 64bit IO Format:%lld & %llu Submit Status Descripti ...
- Eclipse : 找不到或无法加载主类
问题: 找不到或无法加载主类 解决思路: Step1: 去网上百度了下,基本上都说是环境变量的问题. 原因:环境变量设置有问题. 解决方法:重设环境变量 结果:当然问题没解决. Step2:再次百度, ...