<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title><script type="text/javascript" src="jquery-1.6.2.js"></script>
<script type="text/javascript" src="cs001.js"></script>
<style>
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=88);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 55%;
height: 55%;
padding: 20px;
border: 10px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
#company td
</style></head><body>
<form action="#"><table border="0" id="company"> <tr id="head">
<td>复选</td>
<td>名称</td>
<td>数量</td>
<td>姓名</td>
<td>职务</td>
<td>基本工资</td>
<td>考勤工资</td>
<td>绩效考核</td>
<td>公司福利</td>
<td>操作</td>
</tr>
<tr>
<td><input name="" type="checkbox" value="" />1</td>
<td>1</td>
<td>技术部</td>
<td>XX</td>
<td>高级程序员</td>
<td>6000</td>
<td>1500</td>
<td>1500</td>
<td>200</td>
<td><input type="button" value="编辑" class="edit" /><br /><input type="button" class="delect" value="删除" /></td>
</tr>
<tr>
<td><input name="" type="checkbox" value="" />2</td>
<td>2</td>
<td>技术部</td>
<td>XX</td>
<td>高级程序员</td>
<td>6000</td>
<td>1500</td>
<td>1500</td>
<td>200</td>
<td><input type="button" value="编辑" class="edit"/><br /><input type="button" class="delect" value="删除" /></td>
</tr>
<tr>
<td><input name="" type="checkbox" value="" />3</td>
<td>3</td>
<td>技术部</td>
<td>XX</td>
<td>高级程序员</td>
<td>6000</td>
<td>1500</td>
<td>1500</td>
<td>200</td>
<td><input type="button" value="编辑" class="edit"/><br /><input type="button" class="delect" value="删除" /></td>
</tr>
<tr>
<td colspan="9" style="border:none; background-color:#FFF"></td>
<td style="border:none; background-color:#FFF"><input type="button" value="添加新记录" onclick="tj()"/></td>
</tr>
</table><input type="button" value="添加" /> <input type="button" id="bl" change='1' value="全部选定" onclick="Acheck()"/> <input na="1" id="ChangeColor" type="button" value="换色" />
</form><div id="light" class="white_content"><span id="introduction">输入新的记录</span><br /><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">点这里关闭本窗口</a><table border="1">
<tr>
<td>名称</td>
<td><input name="" type="text" id="input01"/></td>
</tr><tr>
<td>数量</td>
<td><input name="" type="text" id="input02"/></td>
</tr><tr>
<td>姓名</td>
<td><input name="" type="text" id="input03"/></td>
</tr>
<tr>
<td>职务</td>
<td><input name="" type="text" id="input04"/></td>
</tr>
<tr>
<td>基本工资</td>
<td><input name="" type="text" id="input05"/></td>
</tr>
<tr>
<td>考勤工资</td>
<td><input name="" type="text" id="input06"/></td>
</tr>
<tr>
<td>绩效考核</td>
<td><input name="" type="text" id="input07"/></td>
</tr>
<tr>
<td>公司福利</td>
<td><input name="" type="text" id="input08" /></td>
</tr> </table><input id="keep" type="button" value="保存" />
</div>
<div id="fade" class="black_overlay"></div>
<script type="text/javascript" src="lx.js"></script>
<script type="text/javascript">
function Acheck()
{
var x=document.getElementById('company');
var elements=x.getElementsByTagName('input');
var bl=id('bl');
if(bl.getAttribute('change')=='1')
{
//alert(elements.length);
for(var i=0;i<elements.length;i++)
{
//alert(elements[i].type);
if(elements[i].type=='checkbox')
{
//alert("checkbox"+i);
elements[i].checked= true;
}
}
bl.setAttribute("change","2");
bl.setAttribute("value","全部取消");
}else if(bl.getAttribute('change')=='2'){
for(var i=0;i<elements.length;i++)
{
//alert(elements[i].type);
if(elements[i].type=='checkbox')
{
//alert("checkbox"+i);
elements[i].checked= false;
}
}
bl.setAttribute("change","1");
bl.setAttribute("value","全部选定");
}
}
</script></body>
</html>
lx.js
[code=javascript]function id(id)//获取id
{
return "string" == typeof id ? document.getElementById(id) : id;
//return document.getElementById(id);
}
function tj()
{
id('light').style.display='block';
id('fade').style.display='block';
id('introduction').innerHTML="输入新的记录";
id('input01').value="";
id('input02').value="";
id('input03').value="";
id('input04').value="";
id('input05').value="";
id('input06').value="";
id('input07').value="";
id('input08').value="";
id('keep').onclick=function(){keep(0);}
//var mybg = document.createElement("div");
};
function keep(nu)
{
var x=document.getElementById('company');
//alert(x.getElementsByTagName("tr")[0].getElementsByTagName("td").length);
if(nu==0)
{
var z =x.insertRow(x.getElementsByTagName("tr").length-1);
z.align = "center";
if((x.getElementsByTagName("tr").length-1)%2==1)
{
z.style.backgroundColor="green";
}else{
z.style.backgroundColor="red";
}
z.style.width="100px;";
z.style.height="50px";
var y1=z.insertCell(0);//插入表格单元
var y2=z.insertCell(1);
var y3=z.insertCell(2);
var y4=z.insertCell(3);
var y5=z.insertCell(4);
var y6=z.insertCell(5);
var y7=z.insertCell(6);
var y8=z.insertCell(7);
var y9=z.insertCell(8);
var y10=z.insertCell(9);
y1.innerHTML='<input name="" type="checkbox" value="" />'+(x.getElementsByTagName("tr").length-2);
y2.innerHTML=id('input01').value;
y3.innerHTML=id('input02').value;
y4.innerHTML=id('input03').value;
y5.innerHTML=id('input04').value;
y6.innerHTML=id('input05').value;
y7.innerHTML=id('input06').value;
y8.innerHTML=id('input07').value;
y9.innerHTML=id('input08').value;
y10.innerHTML="<input type='button' value='编辑' class='edit' /><br /><input type='button' class='delect' value='删除' onclick='deleteR()' />";
bj();sc()
}
else
{
//alert(document.getElementById('input05').value);
//alert(x.getElementsByTagName('tr')[nu].getElementsByTagName('td')[7].innerHTML);
x.getElementsByTagName('tr')[nu].getElementsByTagName('td')[1].innerHTML=document.getElementById('input01').value;
x.getElementsByTagName('tr')[nu].getElementsByTagName('td')[2].innerHTML=document.getElementById('input02').value;
x.getElementsByTagName('tr')[nu].getElementsByTagName('td')[3].innerHTML=document.getElementById('input03').value;
x.getElementsByTagName('tr')[nu].getElementsByTagName('td')[4].innerHTML=document.getElementById('input04').value;
x.getElementsByTagName('tr')[nu].getElementsByTagName('td')[5].innerHTML=document.getElementById('input05').value;
x.getElementsByTagName('tr')[nu].getElementsByTagName('td')[6].innerHTML=document.getElementById('input06').value;
x.getElementsByTagName('tr')[nu].getElementsByTagName('td')[7].innerHTML=document.getElementById('input07').value;
x.getElementsByTagName('tr')[nu].getElementsByTagName('td')[8].innerHTML=document.getElementById('input08').value;
}
document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none';
}
function bj()//编辑按钮
{
var x=document.getElementById('company');
var trs =x.getElementsByTagName("tr");
for (var itr = 0; itr < trs.length; itr++)
{
trs[itr].setAttribute("indexs",itr);
}
//alert(trs[0].getAttribute('indexs'));
var edit =document.getElementsByClassName('edit');
for(var i=0;i<edit.length;i++)
{
edit[i].onclick=function()//弹出内容
{
//alert(this.parentNode.parentNode.getElementsByTagName('td').length);
for(var i=0;i<this.parentNode.parentNode.getElementsByTagName('td').length;i++)
{
//alert(this.parentNode.parentNode.getElementsByTagName('td')[i].innerHTML);
}
//alert(this.parentNode.parentNode.getAttribute('indexs'));
var index=this.parentNode.parentNode.getAttribute('indexs');
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';
document.getElementById('introduction').innerHTML="编辑该行记录";
document.getElementById('input01').value=this.parentNode.parentNode.getElementsByTagName('td')[1].innerHTML;
document.getElementById('input02').value=this.parentNode.parentNode.getElementsByTagName('td')[2].innerHTML;
document.getElementById('input03').value=this.parentNode.parentNode.getElementsByTagName('td')[3].innerHTML;
document.getElementById('input04').value=this.parentNode.parentNode.getElementsByTagName('td')[4].innerHTML;
document.getElementById('input05').value=this.parentNode.parentNode.getElementsByTagName('td')[5].innerHTML;
document.getElementById('input06').value=this.parentNode.parentNode.getElementsByTagName('td')[6].innerHTML;
document.getElementById('input07').value=this.parentNode.parentNode.getElementsByTagName('td')[7].innerHTML;
document.getElementById('input08').value=this.parentNode.parentNode.getElementsByTagName('td')[8].innerHTML;
document.getElementById('keep').onclick=function(){keep(index);}
};
}
}bj();function deleteR()
{ if(confirm("确认要删除？"))
{
this.parentNode.parentNode.removeNode(true);
}};
function sc()
{
var delect =document.getElementsByClassName('delect');
for(var i=0;i<delect.length;i++)
{
delect[i].onclick=function(){
if(confirm("确认要删除？"))
{
this.parentNode.parentNode.removeNode(true);
}
};
}
}sc();[/code]