### 表格應用
- 獲取
- `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 模板引擎
- 特性
- 語法
- 實例
- 表達式和運算符分類
- 主要表達式
- 左表達式
- 自增和自減
- 一元運算符
- 算術運算符
- 關系運算符
- 相等運算符
- 位移運算符
- 二進制位運算符
- 二元邏輯運算符
- 條件(三元)運算符
- 賦值運算符