动态表格中的全选/反选/全不选功能
动态表格中,双击单元格,变成修改状态,同时文本框中的内容默认是单元格中的内容
<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" οnclick="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 οndblclick="dbclk(this)">sue</td>
<td>gmail</td>
<td>9999</td>
<td><input type="button" value="delete" οnclick="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>