完美支持对table的增删改和showTable数据功能

最新推荐文章于 2022-10-17 15:32:18 发布

yanghui628

最新推荐文章于 2022-10-17 15:32:18 发布

阅读量269

点赞数

分类专栏： javascript 文章标签： prototype HTML

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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>Tabel</title>


<script type="text/javascript">
//原型方式
function tableObject(){}
tableObject.prototype.name='';
tableObject.prototype.age='';
tableObject.prototype.sex='';
tableObject.prototype.phone='';
tableObject.prototype.html='';
tableObject.prototype.array=new Array();
tableObject.prototype.insertData=function(tableRow)
{
	tableRow.insertCell().innerHTML=this.name;
	tableRow.insertCell().innerHTML=this.age;
	tableRow.insertCell().innerHTML=this.sex;
	tableRow.insertCell().innerHTML=this.phone;
	tableRow.insertCell().innerHTML=this.html;
	this.array.push(this);	
};
tableObject.prototype.deleteData=function(a)
{
	var rowIndex=a.parentElement.parentElement.rowIndex;
	var tableRow=a.parentElement.parentElement.parentElement;
	tableRow.deleteRow(rowIndex);
	this.array.splice(rowIndex-1,1);
};
tableObject.prototype.updateData=function(a,value)
{	
	var tr=a.parentElement.parentElement;
	tr.cells[0].innerHTML=value.name;
	tr.cells[1].innerHTML=value.age;
	tr.cells[2].innerHTML=value.sex;
	tr.cells[3].innerHTML=value.phone;
	this.array[tr.rowIndex-1]=value;
};
var tableValue=new tableObject();

function insertData()
{
	var tableRow=document.getElementById("table").insertRow();
	tableValue.name='yanghui';
	tableValue.age='25';
	tableValue.sex='女';
	tableValue.phone='13800138000';
	tableValue.html="<a href='javascript:void(0);' onclick='tableValue.deleteData(this)'>删除</a> <a href='javascript:void(0);' onclick='update(this)'>修改</a>";
	tableValue.insertData(tableRow);
	alert("Table总长度"+tableValue.array.length);
}
function update(obj)
{
	var tableValue=new tableObject();
	tableValue.name='杨辉';
	tableValue.age='25';
	tableValue.sex='男';
	tableValue.phone='13800138000';
	tableValue.updateData(obj,tableValue)
}

function showTable()
{
	for(var value in tableValue.array)
	{
		alert("name:"+tableValue.array[value].name+",age:"+tableValue.array[value].age+",sex:"+tableValue.array[value].sex+",phone:"+tableValue.array[value].phone);
	}
}
</script>

</head>
<body>
<input type="button" value="增加行" οnclick="insertData();">

<table id="table">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>联系电话</th>
</tr>
</table>

<input type="button" value="ShowTeble" οnclick="showTable();">
</body>
</html>