動態表格中的全選/反選/全不選功能
動態表格中,雙擊單元格,變成修改狀態,同時文本框中的內容默認是單元格中的內容
<html>
<head>
<title>home_work_3</title>
<script language="javascript">
function add(){
//一行每列的東西
var input_sle = document.createElement("input");
input_sle.type = "checkbox";
input_sle.name = "selec";
var name = document.getElementById("name").value;
var mail = document.getElementById("mail").value;
var num = document.getElementById("num").value;
var input_btn = document.createElement("input");
input_btn.type = "button";
input_btn.value = "delete";
input_btn.onclick = function (){
del(this);
};
//創建五個列
var td_1 = document.createElement("td");
td_1.appendChild(input_sle);
var td_2 = document.createElement("td");
td_2.innerText =name;
td_2.ondblclick = function(){
dbclk(this);
}
var td_3 = document.createElement("td");
td_3.innerText =mail;
td_3.ondblclick = function(){
dbclk(this);
}
var td_4 = document.createElement("td");
td_4.innerText =num;
td_4.ondblclick = function(){
dbclk(this);
}
var td_5 = document.createElement("td");
td_5.appendChild(input_btn);
//創建行
var tr = document.createElement("tr");
tr.appendChild(td_1);
tr.appendChild(td_2);
tr.appendChild(td_3);
tr.appendChild(td_4);
tr.appendChild(td_5);
//行appendChild table
var tbl = document.getElementById("tbl");
tbl.appendChild(tr);
}
function del(obj){
var tr = obj.parentNode.parentNode;
var tbl = document.getElementById("tbl");
tbl.removeChild(tr);
}
function checkboxsle(num){
var checkboxes = document.getElementsByName("selec");
for(var i = 0;i < checkboxes.length;i++){
switch (num){
case 1: checkboxes[i].checked = true;break;
case 2: checkboxes[i].checked =!checkboxes[i].checked;break;
default: checkboxes[i].checked =false;
}
}
}
function dbclk(obj){
var text_obj = obj.firstChild;
var input_obj = document.createElement("input");
input_obj.type = "text";
input_obj.value = text_obj.nodeValue;
input_obj.size = "15";
obj.replaceChild(input_obj,text_obj);
input_obj.focus();
input_obj.onblur = function(){
onblurInput(obj,input_obj);
};
}
function onblurInput(obj,input){
var text_node = document.createTextNode(input.value);
obj.replaceChild(text_node,input);
}
</script>
</head>
<body>
姓名:<input type="text" id="name"/>
郵箱:<input type="text" id="mail"/>
編號:<input type="text" id="num"/>
<input type="button" value="add" onclick="add()"/>
<hr></hr>
<table align="center" cellpadding="0" cellspacing="0" border="1" width="50%">
<tbody id="tbl" align="center">
<tr>
<th>選擇</th>
<th>姓名</th>
<th>郵箱</th>
<th>編號</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" name="selec"></td>
<td ondblclick="dbclk(this)">sue</td>
<td>gmail</td>
<td>9999</td>
<td><input type="button" value="delete" onclick="del(this)"></td>
</tr>
</tbody>
</table>
<hr></hr>
<table align="center">
<tbody>
<tr>
<td>
<input type="button" value="全選" onclick = "checkboxsle(1)"/> 
<input type="button" value="反選" onclick = "checkboxsle(2)"/> 
<input type="button" value="全不選" onclick = "checkboxsle(3)"/>
</td>
</tr>
</tbody>
</table>
</body>
</html>