[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=& ...
随机推荐
- oc 正则图片<img /> 标签
-(NSString *)getImageAttributeValue:(NSString *)content attributeKey:(NSString *)key { NSString *reg ...
- NET4.5之初识async与await
这是两个关键字,用于异步编程.我们传统的异步编程方式一般是Thread.ThreadPool.BeginXXX.EndXXX等等.把调用.回调分开来,代码的逻辑是有跳跃的,于是会导致思路不是很清晰的问 ...
- Shell cmd set note
查看启动信息 dmesg [ 0.000000] Initializing cgroup subsys cpuset[ 0.000000] Initializing cgroup subsys cpu ...
- Java中几种日志方案
.本文记录Java中几种常用的日志解决方案 0x01 Log4j .这应该是一个比较老牌的日志方案了,配置也比较简单,步骤如下 1)添加对应依赖,比如 Gradle 中 dependencies { ...
- [转]MongoDB for Java】Java操作MongoDB
原文地址: MongoDB for Java]Java操作MongoDB 开发环境: System:Windows IDE:eclipse.MyEclipse 8 Database:mongoDB 开 ...
- 关于gem包下载网站的说明
- android 添加背景音乐
MediaPlayer mediaPlayer=MediaPlayer.create(MainActivity.this,R.raw.qiji); mediaPlayer.start();
- 刚刚学了循环，1到n的求和与阶乘
//求和 int a = Convert.ToInt32(Console.ReadLine()); int c = 0; for (int b = 0; b <= a; b++) { c = c ...
- paper 19 ：机器学习算法（简介）
本来看了一天的分类器方面的代码,乱乱的,索性再把最基础的概念拿过来,现总结一下机器学习的算法吧! 1.机器学习算法简述 按照不同的分类标准,可以把机器学习的算法做不同的分类. 1.1 从机器学习问题角 ...
- form文件上传，防止页面刷新
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>文件上传 ...