Topic ：动态创建表格（及其所有的知识点）
功能说明：
我们模拟从服务器得到数据来动态生成表格的过程
我们把表格放到指定的位置 在这里我们放到box里面
我们可以通过删除键来进行删除相应的数据
我们把生成表格的方法封装成一个函数这样我们以后就可以用一句话方便的创建表格了；
网页示例：
代码示例 ：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>动态创建表格</title>
<style type="text/css">
#box table thead tr th{
width: 125px;
}
</style>
</head>
<body>
<div id="box">
</div>
<script src="../js/common.js"></script>
<script>
//说明 ： 我们模拟从服务器得到数据来动态生成表格的过程
// 我们把表格方法指定的位置 在这里我们方法 box里面
// 1. 我们从服务器端获取数据 我们省略用一个数组来进行(数组里面是一个一个的对象) 模拟 我们这里做一个程序员工资表
// 表头的数据
var headData = ['name','language','salary','删除'];
// body数据
var bodyData = [
{name: 'zhang',language: 'C++',salary: '9000'},
{name: 'wang',language: 'java',salary: '12000'},
{name: 'zhao',language: 'C',salary: '8000'},
{name: 'li',language: 'PHP',salary: '1000'},
{name: 'hu',language: 'HTML',salary: '10000'},
];
// 2. 制作表头
// 创建table 获取box 把table放进去
var box = document.getElementById('box');
var table = document.createElement('table');
box.appendChild(table);
var thead = document.createElement('thead');
table.appendChild(thead);
var tr = document.createElement('tr');
thead.appendChild(tr);
// 我们这里要往th里面添加内容 就是往th标签里面的innerText添加内容
// 又因为他有兼容性问题 所以我们这里引入了common.js使用我们以前写的设置innerText内容的函数
headData.forEach (function (item) {
var th = document.createElement('th');
tr.appendChild(th);
setInnerText(th,item);
})
// 到这里我们的表头的内容已经制作完毕 但是我们的样式太难看 我们来设置一下他的样式
table.border = '1px';
// 我们这里设置的是table的宽度 因为我们没法js中设置tr th的宽度 但是在css中可以设置th的宽度
table.style.width = '500px';
// cellspacing 属性规定单元格之间的空间。
// 请勿将该属性与 cellpadding 属性相混淆，cellpadding 属性规定的是单元边沿与单元内容之间的空间。
table.cellSpacing = '0px';
tr.style.height = '50px';
tr.style.backgroundColor = 'lightgray';
// 2. 生成tbody
var tbody = document.createElement('tbody');
table.appendChild(tbody);
// 遍历数组
bodyData.forEach (function (item) {
// 我们每一个item就是一个对象 对应一行
tr = document.createElement('tr');
tbody.appendChild(tr);
// 我们的item对象每一个属性对应一列
// 所以我们遍历对象的每一个属性
// 我们使用for-in来遍历这个对象 i指代对象名称 item[i]就是对象的值
for (var i in item) {
//每一个属性对应一个td
var td = document.createElement('td');
tr.appendChild(td);
setInnerText(td, item[i]);
}
// 操作删除列
// 我们在循环中写 td就可以给每一个tr加一个td 删除列自然就搞定了
var td = document.createElement('td');
tr.appendChild(td);
// 删除列的td是一个超链接
var a = document.createElement('a');
td.appendChild(a);
a.href = 'javascript:void(0)';
setInnerText(a,'delete');
//设置a的点击事件
// 一到循环里面设置事件我们立马就会想到优化的问题 我们可定要把事件处理函数写到外面去
// 而且不能加括号
a.onclick = deleteFunction;
})
function deleteFunction () {
// 因为我们删除数据就是危险的操作我们就要添加提示框
// confirm() 点击确定返回true 反之false
var isYes = confirm('是否确定删除?');
// 删除当前行
// 那么我们就会找 当前a 所在的tr 就是a的父级的父级
if (isYes) {
// 如果确定删除 删除和创建的函数是对应的
tbody.removeChild(this.parentNode.parentNode);
}
}
// tbody 写到这里以基本完成后 就要设置器样式
tbody.style.textAlign = 'center';
</script>
</body>
</html>
知识点盘点：
大部分的知识点已经在代码中详细的解释，
for-in的用法
for-in循环是为了遍历对象而设计的，事实上for-in也能用来遍历数组，但定义的索引i是字符串类型的。如果数组具有一个可枚举的方法，也会被for-in遍历到
遍历对象 ：
i指的是属性名 objTmp[i] 指的是属性的值 ：
for(var i in objTmp){
console.log(i+": "+objTmp[i])
}
遍历数组：
for(var i in arrTmp){
console.log(i+": "+arrTmp[i])
}
thead 不能设置大小；
confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。 返回的是boolean类型的
说明
如果用户点击确定按钮，则 confirm() 返回 true。如果点击取消按钮，则 confirm() 返回 false。
在用户点击确定按钮或取消按钮把对话框关闭之前，它将阻止用户对浏览器的所有输入。在调用 confirm() 时，将暂停对 JavaScript 代码的执行，在用户作出响应之前，不会执行下一条语句。
函数的封装代码示例 ：
只需要一行就可以创建表格：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>封装</title>
<style type="text/css">
#box table thead tr th{
width: 125px;
}
</style>
</head>
<body>
<div id="box">
</div>
<script src="../js/common.js"></script>
<script>
//说明 ： 我们模拟从服务器得到数据来动态生成表格的过程
// 我们把表格方法指定的位置 在这里我们方法 box里面
// 1. 我们从服务器端获取数据 我们省略用一个数组来进行(数组里面是一个一个的对象) 模拟 我们这里做一个程序员工资表
// 表头的数据
var headData = ['name','language','salary','删除'];
// body数据
var bodyData = [
{name: 'zhang',language: 'C++',salary: '9000'},
{name: 'wang',language: 'java',salary: '12000'},
{name: 'zhao',language: 'C',salary: '8000'},
{name: 'li',language: 'PHP',salary: '1000'},
{name: 'hu',language: 'HTML',salary: '10000'},
];
// 获取box 把table放进去
var box = document.getElementById('box');
createTable(box,headData,bodyData);
function createTable (parent,headData,bodyData) {
// 因为一个函数尽量不要太长 一般不超过50行吧 所以我们把这个函数分成两个部分
// 注意这个函数这样写仅仅是多了一个吧他的返回值给table而已 他自身的功能还是能实现的 注意和注册事件的区分
var table = createHead(parent,headData);
createBody(table,bodyData);
}
function createHead (parent,headData) {
// 2. 制作表头
var table = document.createElement('table');
parent.appendChild(table);
var thead = document.createElement('thead');
table.appendChild(thead);
var tr = document.createElement('tr');
thead.appendChild(tr);
// 我们这里要往th里面添加内容 就是往th标签里面的innerText添加内容
// 又因为他有兼容性问题 所以我们这里引入了common.js使用我们以前写的设置innerText内容的函数
headData.forEach (function (item) {
var th = document.createElement('th');
tr.appendChild(th);
setInnerText(th,item);
})
// 到这里我们的表头的内容已经制作完毕 但是我们的样式太难看 我们来设置一下他的样式
table.border = '1px';
// 我们这里设置的是table的宽度 因为我们没法js中设置tr th的宽度 但是在css中可以设置th的宽度
table.style.width = '500px';
// cellspacing 属性规定单元格之间的空间。
// 请勿将该属性与 cellpadding 属性相混淆，cellpadding 属性规定的是单元边沿与单元内容之间的空间。
table.cellSpacing = '0px';
tr.style.height = '50px';
tr.style.backgroundColor = 'lightgray';
return table;
}
function createBody (table,bodydata) {
// 2. 生成tbody
var tbody = document.createElement('tbody');
table.appendChild(tbody);
// 遍历数组
bodyData.forEach (function (item) {
// 我们每一个item就是一个对象 对应一行
tr = document.createElement('tr');
tbody.appendChild(tr);
// 我们的item对象每一个属性对应一列
// 所以我们遍历对象的每一个属性
// 我们使用for-in来遍历这个对象 i指代对象名称 item[i]就是对象的值
for (var i in item) {
//每一个属性对应一个td
var td = document.createElement('td');
tr.appendChild(td);
setInnerText(td, item[i]);
}
// 操作删除列
// 我们在循环中写 td就可以给每一个tr加一个td 删除列自然就搞定了
var td = document.createElement('td');
tr.appendChild(td);
// 删除列的td是一个超链接
var a = document.createElement('a');
td.appendChild(a);
a.href = 'javascript:void(0)';
setInnerText(a,'delete');
//设置a的点击事件
// 一到循环里面设置事件我们立马就会想到优化的问题 我们可定要把事件处理函数写到外面去
// 而且不能加括号
a.onclick = deleteFunction;
})
function deleteFunction () {
// 因为我们删除数据就是危险的操作我们就要添加提示框
// confirm() 点击确定返回true 反之false
var isYes = confirm('是否确定删除?');
// 删除当前行
// 那么我们就会找 当前a 所在的tr 就是a的父级的父级
if (isYes) {
// 如果确定删除 删除和创建的函数是对应的
tbody.removeChild(this.parentNode.parentNode);
}
}
// tbody 写到这里以基本完成后 就要设置器样式
tbody.style.textAlign = 'center';
}
</script>
</body>
</html>
调用 ：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>调用</title>
<style type="text/css">
#box table thead tr th{
width: 125px;
}
</style>
</head>
<body>
<div id="box">
</div>
<script src="../js/common.js"></script>
<script>
//说明 ： 我们模拟从服务器得到数据来动态生成表格的过程
// 我们把表格方法指定的位置 在这里我们方法 box里面
// 1. 我们从服务器端获取数据 我们省略用一个数组来进行(数组里面是一个一个的对象) 模拟 我们这里做一个程序员工资表
// 表头的数据
var headData = ['name','language','salary','删除'];
// body数据
var bodyData = [
{name: 'zhang',language: 'C++',salary: '9000'},
{name: 'wang',language: 'java',salary: '12000'},
{name: 'zhao',language: 'C',salary: '8000'},
{name: 'li',language: 'PHP',salary: '1000'},
{name: 'hu',language: 'HTML',salary: '10000'},
];
// 获取box 把table放进去
var box = document.getElementById('box');
createTable(box,headData,bodyData);
</script>
</body>
</html>
56
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
