javascript实现可全选、反选及删除表格的方法
本文实例讲述了javascript实现可全选、反选及删除表格的方法。分享给大家供大家参考。具体实现方法如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>可以全选反选删除的表格</title>
<styletype="text/css">
body,table
{
margin:0;
padding:0;
font-size:14px;
}
table,tr,th,td
{
border:1pxsolid#cdc;
}
th
{
background-color:green;
width:100px;
}
.oddColor
{
background-color:#ccc;
}
.evenColor
{
background-color:#fcf;
}
.overColor
{
background-color:#dff;
}
</style>
<scripttype="text/javascript">
//定义嵌套数组
vardatas=[["张三",30,"南昌"],["李四",25,"北京"],["王五",20,"郑州"],
["赵六",19,"武汉"],["李莫",18,"深圳"],["罗成",33,"重庆"],
["王平",31,"天津"],["刘萍",22,"上海"],["杨丽",17,"石家庄"],
["郭丽",30,"广州"]];
//动态创建表格
functionCreateMyTable(){
vartblMain=document.getElementById("tblMain");
varrowsCount=tblMain.rows.length;
varaddRow;
varaddCol;
vardetailInfos;
for(vari=0;i<datas.length;i++){
addRow=tblMain.insertRow(rowsCount-1);//控制数据行添加到倒数第二列
addCol=addRow.insertCell(-1);
addCol.innerHTML="<inputtype='checkbox'name='item'/>";
addCol.align="center";//控制列居中
detailInfos=datas[i];
for(varj=0;j<detailInfos.length;j++){
addCol=addRow.insertCell(-1);
addCol.innerHTML=detailInfos[j];
}
addCol=addRow.insertCell(-1);
addCol.innerHTML="<inputtype='button'id='btnDel"+i+"'value='删除'onclick='btnDel(this)'/>";
addCol.align="center";//控制列居中
rowsCount++;
}
TableColor();
}
//设置网格间隔色和高亮显示
varoldClassName;//记住行的背景色
functionTableColor(){
vartblMain=document.getElementById("tblMain");
varrowNodes=tblMain.rows;
for(vari=1;i<rowNodes.length-1;i++){//除去首行和末行
if(i%2==0){
rowNodes[i].className="evenColor";
}
else{
rowNodes[i].className="oddColor";
}
rowNodes[i].onmouseover=function(){
oldClassName=this.className;
this.className="overColor";
}
rowNodes[i].onmouseout=function(){
this.className=oldClassName;
}
}
}
//复选框全选函数
functioncheckAll(){
varcurrentCheckNode=event.srcElement;
varcheckAllNodes=document.getElementsByName("all");
//把没有点击的全选复选框去除复选
for(vari=0;i<checkAllNodes.length;i++){
if(currentCheckNode!=checkAllNodes[i]){
checkAllNodes[i].checked=false;
}
}
varcheckItemNodes=document.getElementsByName("item");
for(vari=0;i<checkItemNodes.length;i++){
checkItemNodes[i].checked=currentCheckNode.checked;
}
}
//按钮选择函数
functionbtnCheckboxSel(index){
varcheckItemNodes=document.getElementsByName("item");
for(vari=0;i<checkItemNodes.length;i++){
if(index==2){
checkItemNodes[i].checked=!checkItemNodes[i].checked;
}
else{
checkItemNodes[i].checked=index;
}
}
}
//每行的删除按钮函数
functionbtnDel(btn){
vartblMain=document.getElementById("tblMain");
vardelRowNode=btn.parentNode.parentNode;
varsMsg="您是否要删除姓名为:【"+delRowNode.cells[1].innerText+"】,年龄为:【"+
delRowNode.cells[2].innerText+"】,城市为:【"+
delRowNode.cells[3].innerText+"】的数据?";
if(window.confirm(sMsg)){
tblMain.tBodies[0].removeChild(delRowNode);
TableColor();
}
}
//删除所选项按钮函数
functionbtnDelSelectRow(){
vararrDel=newArray();
varpos=0;
varitemNodes=document.getElementsByName("item");
for(vari=0;i<itemNodes.length;i++){
if(itemNodes[i].checked){
arrDel[pos]=itemNodes[i].parentNode.parentNode;
pos++;
}
}
if(pos<=0){
return;
}
if(!window.confirm("是否要删除选择的数据?"))
return;
vartblMain=document.getElementById("tblMain");
for(vari=0;i<arrDel.length;i++){
tblMain.tBodies[0].removeChild(arrDel[i]);
}
}
window.onload=CreateMyTable;
</script>
</head>
<body>
<tableid="tblMain"cellspacing="0"cellpadding="10px"align="center">
<tbody>
<tr>
<th><inputtype="checkbox"name="all"onclick="checkAll()"/>全选</th>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
<th>操作</th>
</tr>
<tr>
<th><inputtype="checkbox"name="all"onclick="checkAll()"/>全选</th>
<thcolspan="4">
<inputtype="button"value="全选"onclick="btnCheckboxSel(1)"/>
<inputtype="button"value="全清"onclick="btnCheckboxSel(0)"/>
<inputtype="button"value="反选"onclick="btnCheckboxSel(2)"/>
<inputtype="button"value="删除所选项"onclick="btnDelSelectRow()"/>
</th>
</tr>
</tbody>
</table>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。