[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=& ...
随机推荐
- D3D9 浮点精度的问题
最近在对我们的渲染引擎进行优化的时候,发现一个奇怪的现象,因为我们做了Pre-Z(把比较大的物体先绘制一遍,这个时候关闭颜色写,只开启深度测试和写入,目的是为了减少后面一些不可见像素的计算.),面在绘 ...
- Nand Flash与Nor Flash的区别
区别:http://zhidao.baidu.com/question/1068445.html?qbl=relate_question_0&word=Serial%20Flash%20%D3 ...
- Tomcat Nginx cluster note
nginx install 需要先装pcre, zlib,前者为了重写rewrite,后者为了gzip压缩. 5.安装nginx Nginx 一般有两个版本,分别是稳定版和开发版,您可以根据您的目的来 ...
- devexpress13学习系列（一）PDFViewer（2）
DevExpress.XtraPdfViewer Namespace 该命名空间下,保留着pdfviewer组件需要的类,主要有: Class Description PdfCurrentPa ...
- 前端bower使用
Bower是一个客户端技术的软件包管理器,是由twitter推出的.它可用于搜索.安装和卸载如JavaScript.HTML.CSS之类的网络资源.其他一些建立在Bower基础之上的开发工具,如Yeo ...
- Effective C++ 3.资源管理
//条款13:以对象管理资源 // 1.C++程序中最常使用的资源就是动态分配内存,并且还包括文件描述器,互斥锁,GDI对象.数据库连接.网络socket等.不管哪一种资源,当不再使用的时候必须将其归 ...
- Ways to access Oracle Database in PostgreSQL
Today, organizations stores information(data) in different database systems. Each database system ha ...
- Google 推出的 Java 编码规范(转)
原文地址:http://www.dahuatu.com/1225/988516.html 原文地址:http://www.dahuatu.com/1225/988516.html 原文地址:http: ...
- acm算法模板（4）
杂乱小模板 状态压缩dp小技巧 x&-x是取x的最后一个1的位置. x-=x&-x是去掉x的最后一个1. 读入外挂 int nxt_int(){// neg or pos cha ...
- [转]解析json：与array，list，map，bean，xml相互转化
一.解析json之net.sf.json 下载地址 使用netsfjson需要导入的包 JSONObject JSONArray JavaBean与json字符串互转 List与json字符串互转 M ...