js生成Table最好的例子并且获取table json，Copy即可运行 -

jc_dreaming

浏览: 1883048 次
性别:
来自: 合肥

最近访客更多访客>>

Janne

q649916440

gxlwl

风吹雨打风

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

js生成Table最好的例子并且获取table json，Copy即可运行

博客分类：

json J#HTML

<html>
<head>
</head>
<script>
function addRow(){
	
	var testTable = document.getElementById("testTable");
	var rows = testTable.getElementsByTagName("tr").length;
	var newRow = testTable.insertRow(rows);
	var cell1 = newRow.insertCell(0);
	cell1.innerHTML="<input id='name"+rows+"' type='text' value='computer"+rows+"'>";
	var cell2 = newRow.insertCell(1);
	cell2.innerHTML="<input id='price"+rows+"' type='text' value='price"+rows+"'>"

}

/**
 *  打印数据
 *
 */
function printData(){
	//获取数据
	var data = addData();
	//转换成对象
	var dataVar = eval('('+data+')');

	for(var j=0; j<dataVar.length ; j++){
		var values= dataVar[j];
		alert("name:"+values.name+"\n"+"price:"+values.price);
	}
}
/**
 *  装载数据
 *
 */
function addData(){
	//数据集合
	var datas="[";
	var trs = testTable.getElementsByTagName("TR");

	var rows = testTable.getElementsByTagName("TR").length;
	//因为有表头所以从第二行开始是数据
	for(var i = 1; i < rows ; i++){
		//一对数据
		var data ="";
		var tr = trs[i];
		if(i==1){
			data += "{";
		}else{
			data += ",{";
		}
		var name = tr.firstChild.firstChild.value;
		var price = tr.lastChild.firstChild.value;
		data += "name:'"+name+"',price:'"+price+"'}";
		datas +=data;
	}
	datas += "]";
	//alert(datas);
	return datas;
}
</script>
<body>
<form>
	<table id="testTable">
		<tr>
			<th>笔记本</th>
			<th>价格</th>
		</tr>
		<tr>
			<td>
				<input id="name0" type="text" value='compute1'>
			</td>
			<td>

				<input id="price0" type="text"  value='price1'>
			</td>
		</tr>
		<tr>
			<td>
				<input id="name1" type="text"  value='compute2'>
			</td>
			<td>

				<input id="price1" type="text"  value='price2'>
			</td>
		</tr>
		<tr>
			<td>
				<input id="name2" type="text" value='compute3'>
			</td>
			<td>

				<input id="price2" type="text"  value='price3'>
			</td>
		</tr>
	<table>

	<input id="1" type="button" value="增加一行" onclick="addRow()"/>
	<input id="2" type="button" value="打印数据" onclick="printData()"/>
</form>
</body>
</html>

分享到：

让你理解HTML DOM :节点,节点树,访问节点 ... | js掩藏table列或者行

2011-01-05 16:42
浏览 5295
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

js生成Table最好的例子并且获取table json，Copy即可运行

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

js生成Table最好的例子并且获取table json，Copy即可运行

评论

发表评论

相关推荐

下载文件的一种简单方法js

JS escape、encodeURI 、encodeURIComponent 编码与解码

理解setTimeout和setInterval

Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)

js中SetInterval与setTimeout

ＪＳ人民币大写转化

您查看的网页正在试图关闭窗口。是否关闭此窗口”的屏蔽方法(JavaScript)

JS获取页面大小信息

JS 使用try...catch

让你理解HTML DOM :节点,节点树,访问节点!

js掩藏table列或者行

正则表达式通过实例透彻理解

JS正则验证邮箱/手机/电话的格式

是js 常用正则表达式表单验证代码

js 当前浏览者的显示器分辨率:

js处理乱码

实用Script详解：一触即停的滚动信息栏

js操作checkbox,radio,select

window.opener属性与window.open()方法

js判断对象是否为空

最近访客更多访客>>