<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#form {
width: 480px;
margin: 30px auto;
border: 1px solid #eee;
border-radius: 5px;
padding: 10px;
line-height: 30px;
position: relative;
}
button {
position: absolute;
right: 10px;
bottom: 10px;
}
#tab {
width: 500px;
margin: 30px auto;
border-collapse: collapse;
}
th,
td {
border: 1px solid #000;
padding: 5px;
}
tbody tr td:first-child {
text-align: center;
}
/*input[type] 屬性選擇器 選擇input標籤，並且有type屬性input標籤*/
/*input[type = "checkbox"] 選擇有type屬性並且值爲checkbox的input標籤*/
input[type="checkbox"] {
width: 15px;
height: 15px;
}
#div1 {
position: relative;
width: 480px;
padding: 10px;
margin: 0 auto;
}
</style>
<script type="text/javascript">
window.onload = function(){
//獲取元素
var inpS = document.querySelectorAll('#form input');
var btnS = document.getElementsByTagName('button');
var tab = document.getElementById('tab');
var all = document.getElementById('all');
// console.log(tab,all)
//添加內容
btnS[0].onclick = function(){
//創建一行
var tr = document.createElement('tr');
for(var i=0; i<4; i++){
//向行內添加列
tr.appendChild(document.createElement('td'));
}
//獲取僞數組tr內容的td
var tdS = tr.children;
tdS[0].innerHTML = '<input type="checkbox">';
tdS[1].innerText = inpS[0].value;
tdS[2].innerText = inpS[1].checked == true ? '男' : '女';
tdS[3].innerText = inpS[3].value;
//tr追加表格
tab.tBodies[0].appendChild(tr);
}
//全選按鈕 和全選按鈕的狀態相同
all.onclick = function(){
//獲取所有tbody中的複選框
var ck = tab.tBodies[0].getElementsByTagName('input');
for(var i=0; i<ck.length; i++){
ck[i].checked = all.checked;
}
}
//刪除 選中的tr
btnS[1].onclick = function(){
//獲得tbody中的複選框
var ck = tab.tBodies[0].getElementsByTagName('input');
//判斷複選框狀態
for(var i=0; i<ck.length; i++){
if(ck[i].checked == true){
//取得父級的父級 刪除該行
ck[i].parentNode.parentNode.remove();
i--;
}
}
}
}
</script>
</head>
<body>
<div id="form">
請輸入姓名: <input type="text" id="name"> <br>
請輸入性別: <input type="radio" id="sex" name="sex" checked>男 <input type="radio" name="sex">女<br>
請輸入年齡: <input type="text" id="age">
<button>添加到表格</button>
</div>
<table id="tab">
<thead>
<tr>
<th width="20%"><label><input type="checkbox" id="all">全選</label></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>
</body>
</html>
![]()
