[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=& ...

随机推荐

cocos2dx 3.x(点击屏幕移动精灵，拖动精灵)不需要写回调函数Lua表达式
// // MainScene.cpp // helloworld // // Created by apple on 16/9/19. // // #include "MainScene. ...
linux bash history
vim /etc/profile export HISTSIZE=10000 export HISTTIMEFORMAT="`whoami` : %F %T : " export ...
java万物皆对象
我们以Dom对象的形式可以CRUD xml文件或xml字串(经流把xml文件读出转成字串) 我们以JsonObject对象的形式可以CRUD json字串还有正则表达式.ORM都是.
iOS 工程中文件变成红色是什么情况
iOS 工程中文件变成红色是原有的文件路径改变了,系统找不到了.
Java初学--无限循环
利用for循环和while循环分别做到,从键盘读取任意数,输入0自动跳出无限循环,并判断有几个正数几个负数. 1.for循环的无限循环: import java.util.Scanner;//引用Sc ...
nyist 518 取球游戏
http://acm.nyist.net/JudgeOnline/problem.php?pid=518 取球游戏时间限制:1000 ms | 内存限制:65535 KB 难度:2 描述今 ...
将activity变成dialog风格
其实很简单: 只是把activity的theme设置成dilog形式的: <activity android:name=".ActivityPackage.DatePickerActi ...
ajax常用参数
url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址.前台跳转到后台请求参数:前台向后台传数据回调函数:回调函数就是一个自定义的函数在发生特定的事件的时候调用来处理这个事件 ...
springday04-go2
练习:计算一个人的bmi指数.算法如下: 身高单位是米比如1.70 体重单位是公斤比如90 bmi指数 = 体重/身高/身高如果bmi>24过重,否则正常.视图需要两个,一个是bmi_ ...
夺命雷公狗—angularjs—13—post参数的接收发送
我们强悍的angularjs为我们不仅仅提供了他的get接收方式,而且也有post的接收方式,我们现在做一个模拟接收后端传递过来的json的数据: <?php $arr = ['user'=&g ...

[HTML]js动态修改表格里面的内容

[HTML]js动态修改表格里面的内容的更多相关文章

随机推荐

热门专题