[HTML]js动态修改表格里面的内容
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="mytabletest.css" type="text/css">
<script language="javascript" type="text/javascript">
function $(id) {
return document.getElementById(id);
}
function addHero() {
var z;
var i=$("ph").value;
for (var j=1;j<$("mytable").rows.length;j++) {
if(parseInt(i)>=parseInt($("mytable").rows[j].cells[0].getElementsByTagName("input")[0].value))
{
z=j;
}
}
var tableRow=$("mytable").insertRow(z+1);
var Cell_0=tableRow.insertCell(0);
Cell_0.innerHTML='<input value="'+$("ph").value+'" readonly="true"/>';
Cell_0.className="s1";
var Cell_1=tableRow.insertCell(1);
Cell_1.innerHTML='<input value="'+$("xm").value+'" readonly="true"/>';
Cell_1.className="s2";
var Cell_2=tableRow.insertCell(2);
Cell_2.innerHTML='<input value="'+$("ch").value+'" readonly="true"/>';
Cell_2.className="s3";
var Cell_3=tableRow.insertCell(3);
Cell_3.innerHTML="<a href='#' onclick='Del(this.parentNode,this.parentNode.parentNode.rowIndex)'>删除</a>";
Cell_3.className="s4";
var Cell_4=tableRow.insertCell(4);
Cell_4.innerHTML="<a href='#' onclick='edit(this.parentNode.parentNode)' class='edit'>修改</a>";
Cell_4.className="s5";
} function Del(obj,val) {
var a=window.confirm("您确定要删除吗？");
if(a) {
$("mytable").deleteRow(val);
} else {
window.alert("未删除！");
}
} function edit(obj) {
var inp = obj.getElementsByTagName("input");
for (var i=0,len=inp.length;i<len;i++)
{
inp[i].readOnly=false;
}
}
</script>
</head>
<body>
<h1>梁山英雄排行榜</h1>
<table id="mytable" cellspacing="0px" border="3" bordercolor="red">
<tr>
<td class="s_top">排行</td>
<td class="s_top">姓名</td>
<td class="s_top">绰号</td>
<td class="s_top" colspan="2">操作</td>
</tr>
<tr>
<td class="s1"><input value="1" readonly="true"/></td>
<td class="s2"><input value="宋江" readonly="true"/></td>
<td class="s3"><input value="呼保义" readonly="true"/></td>
<td class="s4"><a href="#" onclick='Del(this.parentNode,this.parentNode.parentNode.rowIndex)'>删除</a></td>
<td class="s5"><a href="#" onclick='edit(this.parentNode.parentNode)'>修改</a></td>
</tr>
<tr>
<td class="s1"><input value="2" readonly="true"/></td>
<td class="s2"><input value="卢俊义" readonly="true"/></td>
<td class="s3"><input value="玉麒麟" readonly="true"/></td>
<td class="s4"><a href="#" onclick='Del(this.parentNode,this.parentNode.parentNode.rowIndex)'>删除</a></td>
<td class="s5"><a href="#" onclick='edit(this.parentNode.parentNode)'>修改</a></td>
</tr>
<tr>
<td class="s1"><input value="3" readonly="true"/></td>
<td class="s2"><input value="吴用" readonly="true"/></td>
<td class="s3"><input value="智多星" readonly="true"/></td>
<td class="s4"><a href="#" onclick='Del(this.parentNode,this.parentNode.parentNode.rowIndex)'>删除</a></td>
<td class="s5"><a href="#" onclick='edit(this.parentNode.parentNode)'>修改</a></td>
</tr>
</table> <span class="span1">排行</span><input id="ph" type="text"/>
<br>
<span class="span1">姓名</span><input id="xm" type="text"/>
<br>
<span class="span1">绰号</span><input id="ch" type="text"/>
<br>
<input class="but" type="button" value="添加英雄" onclick="addHero()"/> </body>
</html>
另外一种:
步骤：
1、获取表格的dom节点
2、通过rows和cells定位td单元格
3、通过修改innerHTML
示例代码
<body>
<table id='test'> //定义一个table
<tr>
<td></td><td></td>
</tr>
</table>
<script>
var tb = document.getElementById('test');//获取表格的dom节点
var td = tb.rows[0].cells[0];//获取0行0列的td单元格
td.innerHTML = '222';//动态修改表格的内容为222
</script>
</body>
[HTML]js动态修改表格里面的内容的更多相关文章
- javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行
jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...
- JavaScript动态改变表格单元格内容的方法
本文实例讲述了JavaScript动态改变表格单元格内容的方法.分享给大家供大家参考.具体如下: JavaScript动态改变表格单元格的内容,下面的代码通过修改单元格的innerHTML来修改单元格 ...
- JS动态生成表格后 合并单元格
JS动态生成表格后 合并单元格 最近做项目碰到表格中的单元格合并的问题,需求是这样的,首先发ajax请求 请求回来后的数据 动态生成表格数据,但是生成后如果编号或者(根据其他的内容)有相同时,要合并单 ...
- js 动态生成表格案例
<1>布局:一个table表格,表格分为两个部分,上面是thead表头,表头里面仅一行,有4列(th), 下面是tbody表格内容,要求tbody中的每一行都是用js动态创建的 < ...
- 微信小程序 JS动态修改样式
微信小程序这个坑啊,js动态修改样式,我们并不能用js或者jq 轻轻松松一行代码搞定.或者用removeClass addClass 来修改样式. 以下是一种动态修改样式的方法,原理是绑定数据,然后动 ...
- js动态创建表格,删除行列的小例子
js动态创建表格,删除行列的实例代码. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
- JS动态修改微信浏览器中的title
JS动态修改微信浏览器中的title我们的原理是设置一个ifame然后我们再加载一下就可以实现了,具体的例子如下所示． 平时使用JS修改title,直接document.title=新标题就好了 这样 ...
- js动态添加-表格逐行添加、删除、遍历取值
关于js对表格进行逐行添加,今天抽空整理了一下:新建一个html文件(没有编辑器的可以新建一个demo.txt文件,然后改后缀名为demo.html),把下面代码全部贴进去即可.功能包括:表格添加一行 ...
- js动态改变下拉框内容
今天为大家分享一篇js动态设置select下拉菜单的默认选中项实例,具有很好的参考价值,希望对大家有所帮助. 代码实例如下: <!DOCTYPE html> <html lang=& ...
随机推荐
- ios问答题与答案
1. OC中,与alloc语义相反的方法是dealloc还是release?与retain语义相反的方法是dealloc还是release?为什么?需要与alloc配对使用的方法是dealloc还是r ...
- Using Amazon API Gateway with microservices deployed on Amazon ECS
One convenient way to run microservices is to deploy them as Docker containers. Docker containers ar ...
- pyOpenSSL0.13安装失败
/usr/lib64/python2.4/distutils/dist.py:236: UserWarning: Unknown distribution option: 'zip_safe' war ...
- weblogic对jms实现的QueueConnection实现与TopicConnection实现问题
今天看了一段之前同事写jms的代码,觉得好像不对,但是不可能,生产上用的代码.刚开始想了下,脑子没转过弯来,后来一想是个简单的问题 代码如下: topicConnection = (TopicConn ...
- SpringJUnit4ClassRunner拉起来的单元测试怎么装配Container实例
由于历史代码的原因,产品中部分spring装配的实例需要通过Container的实现类(自定义的)去获取.那么当在单元测试中怎么实例化这个Container实现呢? 实例化Container实现需要A ...
- [转]EntityFramework走马观花之CRUD（上）
学习Entity Framework技术期间查阅的优秀文章,出于以后方便查阅的缘故,转载至Blog,可查阅原文:http://blog.csdn.net/bitfan/article/details/ ...
- zabbix监控企业esxi虚拟机
zabbix监控企业esxi虚拟机 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 我来公司有一段时间了,最近也发现模型部有测试和开发反应某台机器登陆不上去了,结果登陆esxi服务器 ...
- Mac下无法安装Dragon Bones的解决方案
在Mac下安装dragon bones 然后很郁闷的发现 没有 Exchange Manger 然后就去官网下载了一个 不过下载以后发现 怎么都认不出我的Flash CC来 一安装zxp扩展就提示我没 ...
- 转：python webdriver API 之操作测试对象
一般来说,所有有趣的操作与页面交互都将通过 WebElement 接口,包括上一节中介绍的对象定位,以及本节中需要介绍的常对象操作.webdriver 中比较常用的操作元素的方法有下面几个: cle ...
- C++之路进阶——codevs2366（朋友圈）
2366 朋友圈 2012年省队选拔赛河北 时间限制: 10 s 空间限制: 256000 KB 题目等级 : 大师 Master 题目描述 Description 在很久很久以前,曾经 ...