查看: 4627|回复: 0

[网络编程] js 简化版动态添加表格

7 主题	6 好友	130 积分

注册会员

Rank: 2

生肖: 猴
星座: 金牛座
性别: 女

发消息

发表于 2014-1-6 23:27:34 |显示全部楼层

本帖最后由 sky_yoyo 于 2014-1-8 17:39 编辑

作者：sky_yoyo　日期：2014-01-08　原文地址：

A:

B:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表格的动态添加</title>
<script type="text/javascript">
//缓存数据在页面
var header = ["编号", "名称", "出版社", "价格"];
var books = [{
bookNo: "001",
name: "js高级程序设计",
press: "邮电大学出版",
priess: "333"
},
{
bookNo: "002",
name: "HTML高级程序设计",
press: "邮电大学出版",
priess: "333"
},
{
bookNo: "003",
name: "C#高级程序设计",
press: "邮电大学出版",
priess: "333"
}
];
//创建表格的方法
function CreateTable() {
//创建表格对象
var objTable = document.createElement("table");
//设置表格属性
objTable.setAttribute("border", "1");
objTable.setAttribute("id", "bookTable");
//创建caption对象
var objCaption = document.createElement("caption");
objCaption.innerText = "图书列表";
objTable.appendChild(objCaption);
//创建表头header
var objheader = document.createElement("thead");
var objheaderRow = objheader.insertRow(0);//表头行下标
//创建th
for (var i = 0; i < header.length; i++) {
var headerCell = objheaderRow.insertCell(i);
headerCell.innerText = header[i];
}
objTable.appendChild(objheader);//表头加入表格对象
//创建表格元素--tbody
var objBody = document.createElement("tbody");
//创建内容--行
for (var i = 0; i < books.length; i++) {
var index = objBody.rows.length; //内容行的长度
//行号
var objRow = objBody.insertRow(index); //行
//var objCell = objRow.insertcell(1); //列
//objCell.innerText = books[i].bookNo; //只取表的编号
//-------简化创建列-----
for (var prop in books[i])//占位--属性位prop 、编号位books[i]
{
var objCell = objRow.insertCell(objRow.cells.length);
objCell.innerHTML = books[i][prop];
//双击编辑--ondblclick
objCell.ondblclick = function () {
//将表格框改为文本编辑框
this.innerHTML = "<input type='text' value='" + this.innerText + "'/>";
this.childNodes[0].focus();//表单提交
//onblur获得焦点
this.childNodes[0].onblur = function () {
//显示修改后的html节点
this.parentNode.innerHTML = this.value;
}
}
}
//得到插入的位置（最后一行插入数据）
var objCell = objRow.insertCell(objRow.cells.length);
//删除按钮
objCell.innerHTML = "<input name='btn_dele_Row' type='button' value='删除' />";
}
objTable.appendChild(objBody); //主体对象加入
document.body.appendChild(objTable);//table输入页面
}
//---------创建表格
window.onload = function () {
//创建表格的按钮事件
var btn_create_table = document.getElementById("createTable");
btn_create_table.onclick = function () {
//调用创建表格的方法
CreateTable();
//删除行按钮
var btnDeleRow = document.getElementsByName("btn_dele_Row");
for (var i = 0; i < btnDeleRow.length; i++) {
//按钮所在行-事件
btnDeleRow[i].onclick = function () {
//当前一行
var r = this.parentNode.parentNode;
//删除选择记录
document.getElementById("bookTable").children[2].deleteRow(r.rowIndex - 1);
}
}
}
}//end---------创建表格
</script>
</head>
<body>
<input id="createTable" type="button" value="创建表格" />
</body>
</html>

复制代码

使用道具举报

返回列表

		自动登录	找回密码
密码			立即注册