### 表格应用
- 获取
- `tBodies / tHead / tFoot / rows / cells `
```js
var oTab = document.getElementById('tab1');
alert(oTab.tBodies[0].rows[1].cells[1].innerHTML);
```
- 隔行变色
- 鼠标移入高亮
- 添加/删除一行
- DOM 方法的使用
- 搜索
- 版本1：基础版本 -- 字符串比较
- 版本2：忽略大小写 -- 大小写转换 `toLowerCase()/toUpperCase()`，返回字符串
- 版本3：模糊搜索 -- `search()` 的使用，没找到返回 -1，找到则返回位置
- 版本4：多关键词 -- `split()` 分割字符串，返回数组
- 高亮显示、筛选
- 排序
- 移动 `li` ，使用`appendChild()`： 删除原有 `li`，尾部新增 `li`
- 元素排序：元素集合转换成数组 -- `sort()` 排序 -- `appendChild()`插入
- 代码：
```HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>表格操作</title>
<style>
body {
margin: 0 auto;
width: 400px;
}
table {
border: rgb(97, 97, 97) 1px solid;
width: 400px;
}
td {
border: rgb(255, 106, 136) 1px solid;
}
</style>
<script>
window.onload = function () {
// 封装getElementById
function get(id) {
return document.getElementById(id);
};
// 表格数据
// tHead 作为最后一个数组传入
var data = new Array(
[1, '张三', 12, "<a href='javascript:;'>删除</a>"],
[2, '李四', 13, "<a href='javascript:;'>删除</a>"],
[3, '王五', 14, "<a href='javascript:;'>删除</a>"],
[4, '王七', 19, "<a href='javascript:;'>删除</a>"],
[5, '王九', 24, "<a href='javascript:;'>删除</a>"],
[6, '李六', 42, "<a href='javascript:;'>删除</a>"],
[7, '李三', 23, "<a href='javascript:;'>删除</a>"],
[8, '李六', 76, "<a href='javascript:;'>删除</a>"],
[9, 'CAT', 8, "<a href='javascript:;'>删除</a>"],
[10, 'cat', 2, "<a href='javascript:;'>删除</a>"],
[11, 'dog', 1, "<a href='javascript:;'>删除</a>"],
[12, '3', 5, "<a href='javascript:;'>删除</a>"],
[13, '31', 2, "<a href='javascript:;'>删除</a>"],
[14, '4', 7, "<a href='javascript:;'>删除</a>"],
[15, '42', 9, "<a href='javascript:;'>删除</a>"],
[16, '啊Q', 9, "<a href='javascript:;'>删除</a>"],
['ID', '姓名', '年龄', "操作"]
);
// 传入格式化数组文件 data ，自动生成表格
function createTable(data) {
// 使用文档碎片 生成表格
// var frag = document.createDocumentFragment();
var table = document.createElement('table');
var caption = document.createElement('caption');
var thead = document.createElement('thead');
var tbody = document.createElement('tbody');
var tr = document.createElement('tr');
// 渲染表格
get('b1').appendChild(table);
table.appendChild(caption);
table.appendChild(thead);
table.appendChild(tbody);
thead.appendChild(tr);
var oTr = document.getElementsByTagName('tr');
// 渲染单元格
caption.innerHTML = "<strong style='font-size: 20px'>人员表</strong>";
var i = 0;
var j = 0;
var rNmb = data.length - 1; // 行
var rLth = data[0].length; //列
// 生成表头
for (i = 0; i < rLth; i++){
var th = document.createElement('th');
oTr[0].appendChild(th);
// 写入th数据
var aArr = data[rNmb];
table.tHead.rows[0].cells[i].innerHTML = aArr[i];
}
// 生成 tbody 及插入内容
for (i = 0; i < rNmb; i++) {
var tr = document.createElement('tr');
tbody.appendChild(tr);
for (j = 0; j < rLth; j++) {
var td = document.createElement('td');
tr.appendChild(td);
// 写入td数据
aArr = data[i];
table.tBodies[0].rows[i].cells[j].innerHTML = aArr[j];
}
}
// 不加 tBodies[0] 会把 tHead 当作一行
// console.log(table.rows.length);
chgColor();
aClick();
}
createTable(data);
function chgColor() {
// 隔行变色
var oTr = document.getElementsByTagName('tr');
var oldColor = '';
for (i = 1; i < oTr.length; i++) {
if (i % 2 === 0) {
oTr[i].style.background = '#eee';
} else {
oTr[i].style.background = '#bbb';
}
// 鼠标移入高亮
oTr[i].onmouseover = function () {
oldColor = this.style.background;
this.style.background = 'yellow';
}
oTr[i].onmouseout = function () {
this.style.background = oldColor;
}
}
}
// 增加/删除一行
var btn1 = get('btn1');
var btn2 = get('btn2');
var btn3 = get('btn3');
var btn4 = get('btn4');
var btn5 = get('btn5');
var btn6 = get('btn6');
var txt1 = get('txt1');
var txt2 = get('txt2');
var txt3 = get('txt3');
var txt4 = get('txt4');
var id = data.length;
var oTab = document.getElementsByTagName('table');
// txt1 txt2 增加一行
btn1.onclick = function () {
if (txt1.value != '' && txt2.value != '') {
var newPerson = new Array(id, txt1.value, txt2.value, "<a href='javascript:;'>删除</a>")
data.splice(data.length - 1, 0, newPerson);
get('b1').removeChild(oTab[0]);
createTable(data);
id++;
} else {
alert('请输入姓名和年龄！');
}
}
// 根据 txt4 删除一行
btn3.onclick = del;
function del() {
for (var i in data) {
var aData = data[i];
// console.log(aData[0])
// 校验输入ID 是否和 data.ID 匹配
if (aData[0] === parseInt(txt4.value) || aData[0] === parseInt(txtTd)) {
data.splice(i, 1);
break;
}
}
get('b1').removeChild(oTab[0]);
createTable(data);
}
// 注册 a 标签删除操作事件
var txtTd = '';
function aClick() {
var oA = document.getElementsByTagName('a');
for (var i in oA) {
oA[i].onclick = function () {
// oTab[0].tBodies[0].removeChild(this.parentNode.parentNode);
txtTd = this.parentNode.parentNode.cells[0].innerHTML;
del();
}
}
}
// data 筛选查询
btn2.onclick = searchTr;
function searchTr() {
var oTr = document.getElementsByTagName('tr');
var bData = new Array();
// 储存表头
var thData = data[data.length-1];
if (txt3.value != '') {
for (var i in data) {
var aData = data[i];
// console.log(aData[0])
// 校验输入name 是否和 data.name 匹配
if (aData[1].toLowerCase() === txt3.value.toLowerCase()) {
// 忽略大小写
bData.push(data[i]);
} else if (aData[1].toLowerCase().search(txt3.value.toLowerCase()) != -1) {
// 模糊搜索 search()
bData.push(data[i]);
} else {
// 多关键词搜索 split() 分割关键词
var aTxt = txt3.value.split(' ');
for(var j in aTxt) {
if (aData[1].toLowerCase().search(aTxt[j].toLowerCase()) != -1) {
bData.push(data[i]);
continue;
}
}
}
}
// 传入表头 thData
bData.push(thData);
get('b1').removeChild(oTab[0]);
createTable(bData);
} else {
back();
}
}
// 恢复 data
btn4.onclick = back;
function back() {
get('b1').removeChild(oTab[0]);
createTable(data);
}
// tr 高亮查询
btn5.onclick = function () {
chgColor();
var name = '';
for (i = 0; i < oTab[0].tBodies[0].rows.length; i++) {
name = oTab[0].tBodies[0].rows[i].cells[1].innerHTML;
if (txt3.value != '') {
if (name.toLowerCase() === txt3.value.toLowerCase()) {
// 忽略大小写
oTab[0].tBodies[0].rows[i].style.background = 'yellow';
} else if (name.toLowerCase().search(txt3.value.toLowerCase()) != -1) {
// 模糊搜索 search()
oTab[0].tBodies[0].rows[i].style.background = 'yellow';
} else {
// 多关键词搜索 split() 分割关键词
var aTxt = txt3.value.split(' ');
for(var j in aTxt) {
if (name.toLowerCase().search(aTxt[j].toLowerCase()) != -1) {
oTab[0].tBodies[0].rows[i].style.background = 'yellow';
continue;
}
}
}
} else {
back();
}
}
}
// data 根据元素排序 sort() 方法
btn6.onclick = sortName;
var item = 0; // 排序的元素
var txt5 = get('txt5');
var thData = data[data.length-1]; // 保存 th
function sortName() {
item = parseInt(txt5.value);
data.pop(); // 去掉最后的 th
data.sort(compare); // 正向排序
data.push(thData); // th 加回去
back(); //生成表格
}
// 比较函数 此函数 数字类型和字符串类型不能混排
function compare(arr1, arr2) {
var val1 = arr1[item];
var val2 = arr2[item];
if (!isNaN(val1) && !isNaN(val2)) {
return val1 - val2;
} else {
if (val1 > val2) {
return 1;
} else if (val1 < val2) {
return -1;
} else if (val1 === val2) {
return 0;
}
}
}
}
</script>
</head>
<body id="b1">
<div>
<input type="text" name="name" id="txt1" placeholder="姓名">
<input type="text" name="age" id="txt2" placeholder="年龄">
<input type="button" name="" id="btn1" value="增加">
</div>
<div>
<input type="text" name="" id="txt3" value="张三 六 五">
<input type="button" name="" id="btn2" value="筛选查询">
<input type="button" name="" id="btn4" value="返回">
<input type="button" name="" id="btn5" value="高亮查询">
</div>
<div>
<input type="text" name="" id="txt4" placeholder="id">
<input type="button" name="" id="btn3" value="删除">
</div>
<div>
<input type="text" name="" id="txt5" value='1'>
<input type="button" name="" id="btn6" value="排序">
</div>
</body>
</html>
```
- 前言
- 初探 JavaScript 魅力
- JavsScript 是什么
- 第一个 JS 特效：鼠标提示框
- 网页换肤和 if 判断
- 函数传参
- 循环 while 和 for
- 导航栏选项卡
- JS 简易日历
- JavaScript 基础
- JavaScript 组成
- 变量类型
- 变量类型转换
- 变量的作用域和闭包
- 命名规范
- 运算符
- 程序流程控制
- JSON
- 深入 JavaScript
- 函数返回值
- 函数传参与行间样式
- 数组基础操作
- 定时器的使用
- 定时器的作用
- 数码时钟
- Date 对象其它方法
- 延时提示框
- 无缝滚动
- DOM基础应用
- DOM 基础
- DOM 节点
- 操作元素属性
- DOM 元素灵活查找
- DOM 操作应用
- 创建、插入和删除元素
- 文档碎片
- DOM操作应用高级
- 表格标签
- 表格应用
- 表单应用
- JS 运动基础
- 运动基础
- 运动框架及应用
- 缓冲运动
- 运动的停止条件
- JS 运动应用
- 多物体运动框架
- 任意值运动框架
- 仿 Flash 图片展示
- JS 运动中级
- 链式运动框架
- 完美运动框架
- 运动框架总结
- 运动框架应用
- JS事件基础
- Event 对象和事件
- 鼠标事件
- 键盘事件
- JS 事件中级
- 默认事件
- 拖拽
- JS 事件高级应用
- 事件绑定
- 高级拖拽
- 自定义滚动条
- Ajax 基础
- Ajax 是什么
- 使用 Ajax
- Ajax 原理
- Ajax 中级
- 编写 Ajax
- Ajax 数据
- JS 面对对象基础
- 面对对象是什么
- JS 中的面对对象
- 第一个面对对象的程序
- 工厂方式
- 原型：Prototype
- 面对对象编程方式
- JS 面对对象实例
- 面对对象的选项卡
- JS 面对对象高级
- Json 方式的面向对象
- 拖拽和继承
- 使用继承
- 系统对象
- BOM 应用
- BOM 基础
- 尺寸及坐标
- 常用方法和事件
- COOKIE 基础与应用
- 什么是 cookie
- 使用 cookie
- JS 中的正则表达式
- 正则表达式基础
- 字符串与正则配合
- 字符串
- 量词
- 常用正则例子
- JS Template 模板引擎
- 特性
- 语法
- 实例
- 表达式和运算符分类
- 主要表达式
- 左表达式
- 自增和自减
- 一元运算符
- 算术运算符
- 关系运算符
- 相等运算符
- 位移运算符
- 二进制位运算符
- 二元逻辑运算符
- 条件(三元)运算符
- 赋值运算符