表格元素的获取
table.tHead; 获取thead 获取到的是一个具体元素
table.tBodies; 获取tbody 获取到的是一个集合
table.tFoot; 获取tfoot 获取到的是一个具体元素
tbody.rows; 获取tr 获取到是一个集合
row.cells; 获取td 获取到是一个集合
// 获取表格元素
var table = document.querySelector("#table");
// table.tHead; 获取thead
// 获取到的是一个具体元素
var head = table.tHead;
console.log(head);
// table.tBodies; 获取tbody
// 获取到的是一个集合
var bodys = table.tBodies;
console.log(bodys);
// table.tFoot; 获取tfoot
var foot = table.tFoot;
console.log(foot);
//tbody.rows; 获取tr 获取到是一个集合
var trs = bodys[0].rows;
console.log(trs);
// row.cells; 获取td 获取到是一个集合
var td1s = trs[0].cells;
console.log(td1s);表格的操作
<div>
姓名:<input type="text" />
年龄:<input type="text" />
性别:<input type="text" />
<button>添加</button>
</div>
<table border="1" width="500" id="table">
<thead>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>100</td>
<td>未知</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
<script>
// 获取元素
var inputs = document.querySelectorAll("input");
var btn = document.querySelector("button");
var table = document.querySelector("#table");
var tbody = table.tBodies[0];
//绑定事件
btn.onclick = function () {
// 创建tr
var tr = document.createElement("tr");
// 创建td
// var td1 = document.createElement("td");
// // 赋值
// td1.innerHTML = inputs[0].value;
// // 添加
// tr.appendChild(td1);
// var td2 = document.createElement("td");
// td2.innerHTML = inputs[1].value;
// tr.appendChild(td2);
// var td3 = document.createElement("td");
// td3.innerHTML = inputs[2].value;
// tr.appendChild(td3);
for (var i = 0; i < inputs.length; i++){
var td;
td = document.createElement("td");
td.innerHTML = inputs[i].value;
tr.appendChild(td);
}
// 将tr添加到tBody中
// tbody.appendChild(tr,tbody.children[0])
// tbody.appendChild(tr,tbody.firstElementChild)
tbody.appendChild(tr);
}
</script>动态获取和静态获取
在所有的获取方式中只有获取到的是HTMLCollection才是动态获取
- 静态获取：获取的元素是固定的，不跟据页面结构变化而变化
- 动态获取：获取到的元素是不固定的，根据页面的结构变化而变化
// 先获取 后改变
// var oLis = document.querySelectorAll("#box li");
// console.log(oLis);
// var ul = document.querySelector("#box");
// for (var i = 0; i < 10; i++) {
// var li = document.createElement("li");
// li.innerHTML = "哈哈";
// ul.appendChild(li);
// }
// var oLis = document.getElementsByTagName("li");
// console.log(oLis);
// var ul = document.querySelector("#box");
// for(var i = 0;i<10;i++){
// var li = document.createElement("li");
// li.innerHTML = "哈哈";
// ul.appendChild(li);
// }
// console.log(oLis);
var ul = document.getElementById("box");
var oLis = ul.children;
console.log(oLis);
for (var i = 0; i < 10; i++) {
var li = document.createElement("li");
li.innerHTML = "哈哈";
ul.appendChild(li);
}
console.log(oLis);添加删除表格案例
<div id="form">
请输入姓名: <input type="text" id="name" value="张氏"> <br>
请输入性别: <input type="radio" id="sex" name="sex" checked>男 <input type="radio" name="sex">女<br>
请输入年龄: <input type="text" id="age" value="10">
<button>添加到表格</button> <!-- 如果在form中，button默认是提交功能 -->
</div>
<table id="tab">
<thead>
<tr>
<th width="20%"><input type="checkbox" id="all">全选</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>张三</td>
<td>女</td>
<td>88</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>李四</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>王五</td>
<td>女</td>
<td>1</td>
</tr>
</tbody>
</table>
<div id="div1">
<button>删除所选行</button>
</div>
<script>
// 获取元素
var form = document.getElementById("form"),
formInputs = form.getElementsByTagName("input"),
btns = document.getElementsByTagName("button");
var table = document.querySelector("#tab"),
all = document.querySelector("#all"),
tBody = table.tBodies[0],
trs = tBody.rows,
tBodyInputs = tBody.getElementsByTagName("input");
console.log(trs);
// 1.添加
btns[0].onclick = function () {
// 创建tr
var tr = document.createElement("tr");
createTd('<input type="checkbox">');
createTd(formInputs[0].value);
createTd(formInputs[1].checked ? "男" : "女");
createTd(formInputs[3].value);
function createTd(val) {
// 创建
var td = document.createElement("td");
// 赋值
td.innerHTML = val;
// 添加
tr.appendChild(td);
}
// 将tr添加到tbody
tBody.appendChild(tr);
// 添加完成给tBodyInputs重新绑定事件
for (var i = 0; i < tBodyInputs.length; i++) {
tBodyInputs[i].onclick = function () {
// 每一个小的checkbox选中all才选中只要有一个小的checkbox不选中all就不选中
// 定义一个标识
var flag = true; //表示每一个小的checkbox都是选中的
for (var i = 0; i < tBodyInputs.length; i++) {
// 判断
// 只要有一个小的checkbox不选中
if (tBodyInputs[i].checked != true) {
flag = false;
break;
}
}
// 设置
all.checked = flag;
}
}
// 给all重新赋值
all.checked = false;
}
//2.全选
all.onclick = function () {
// 将当前点击这个all的checked属性对应的布尔值赋值给每一个小的checkbox
for (var i = 0; i < tBodyInputs.length; i++) {
tBodyInputs[i].checked = this.checked;
}
}
// 3.删除所选行
// 获取元素的时候如果获取到的是HTMLCollection集合与页面结构是一一对应的页面结构发生变化集合也变化
btns[1].onclick = function () {
for (var i = 0; i < tBodyInputs.length; i++) {
// 删除checkbox选中的哪一行
if (tBodyInputs[i].checked == true) {
// 删除当前选中这个checkbox对应的那个tr
tBodyInputs[i].parentNode.parentNode.remove();
// 出现了塌陷问题
i--;
}
}
if (trs.length == 0) {
all.checked = false;
}
}
//点击小的checkbox
// 页面默认从上到下执行 当事件触发的时候页面已经加载完毕了只给当前页面存在的checkbox绑定了点击事件 循环已经结束了
for (var i = 0; i < tBodyInputs.length; i++) {
tBodyInputs[i].onclick = function () {
// 每一个小的checkbox选中all才选中只要有一个小的checkbox不选中all就不选中
// 定义一个标识
var flag = true; //表示每一个小的checkbox都是选中的
for (var i = 0; i < tBodyInputs.length; i++) {
// 判断
// 只要有一个小的checkbox不选中
if (tBodyInputs[i].checked != true) {
flag = false;
break;
}
}
// 设置
all.checked = flag;
}
}
</script>