<!DOCTYPE html>
<html>
<head>
<title>adduser.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="../js/append1.js"></script>
</head>
<body >
<div align="center">
<div>添加联系人</div>
<input type="text" name="name">姓名<br/>
<input type="text" name="phone">电话<br/>
<input type="text" name="mail">邮箱<br/>
<input type="button" onclick="add()" value="提交">
</div>
<hr>
<div align="center">
<table border="1" cellspacing="0" id="table">
<tr id="Button">
<td colspan="4" align="center">
<input type="button" value="全选" onclick=All()>
<input type="button" value="反选" onclick=other()>
<input type="button" value="删除" onclick=Delete()>
</td>
</tr>
<tr>
<td><input name="items" type="checkbox" ></td>
<td>李四</td>
<td>1361888234</td>
<td>ab@sina.com</td>
</tr>
</table>
</div>
</body>
</html>
|
function add(){
var Node_name=document.getElementsByName("name")[0];
var Node_phone=document.getElementsByName("phone")[0];
var Node_mail=document.getElementsByName("mail")[0];
var Element_tr=document.createElement("tr");
var select_td=document.createElement("td");
var input_node=document.createElement("input");
input_node.setAttribute("name","items");
input_node.setAttribute("type", "checkbox");
select_td.appendChild(input_node);
var name_td=document.createElement("td");
var name_text=document.createTextNode(Node_name.value);
name_td.appendChild(name_text);
var phone_td=document.createElement("td");
var phone_text=document.createTextNode(Node_phone.value);
phone_td.appendChild(phone_text);
var mail_td=document.createElement("td");
var mail_text=document.createTextNode(Node_mail.value);
mail_td.appendChild(mail_text);
Element_tr.appendChild(select_td);
Element_tr.appendChild(name_td);
Element_tr.appendChild(phone_td);
Element_tr.appendChild(mail_td);
var Element_table=document.getElementById("table");
Element_table.appendChild(Element_tr);
}
function All(){
var check_node=document.getElementsByName("items");
for ( var i = 0; i < check_node.length; i++) {
check_node[i].checked="checked";
}
}
function other(){
var check_node=document.getElementsByName("items");
for ( var i = 0; i < check_node.length; i++) {
if(check_node[i].checked){
check_node[i].checked=null;
}else{
check_node[i].checked="checked";
}
}
}
function Delete(){
var check_node=document.getElementsByName("items");
//alert(check_node.length); for ( var i = 0; i < check_node.length; i++) {
if(check_node[i].checked){
//alert(check_node[i].checked); var delete_tr_node=check_node[i].parentNode.parentNode;
//alert(delete_tr_node.nodeName); var Element_table=document.getElementById("table");
Element_table.removeChild(delete_tr_node);
}
}
}
For循环颠倒一下就可以了，现在循环是从小到大，改成从大到小就可以了,因为数组长度在变化