实现隔行变色效果升级以及实现表格全选、反选、删除效果

最新推荐文章于 2019-04-23 15:40:23 发布

duoduo220

最新推荐文章于 2019-04-23 15:40:23 发布

阅读量668

点赞数

分类专栏：代码再现文章标签： input border table function xhtml javascript

本文链接：https://blog.csdn.net/wo1354691371/article/details/7308049

版权

代码再现专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!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>
<style type="text/css">
.top{
background-color:#3CC;
color:#F30;}
table{
border:solid 1px #00C;
border-collapse:collapse;}
td,th{
   border:solid #03C 1px;
   text-align:center;

   }
   .one{
    background-color:#9CF;
    }
   .two{
    background-color:#C9F;;
    }
.over{
    background-color:#900;
    }

</style>
<script language="javascript" type="text/javascript">
function changeColor(){
//获取所有的TR
var trlist=document.getElementsByTagName("tr");
   for(var i=1;i<trlist.length-1;i++){
if(i%2){
     trlist[i].className="two";

  }else{
  trlist[i].className="one";
   }
    }

}
function cho(type){
   var checkbox=document.getElementsByName("di");
   //alert(checkbox.length);
   if(type=='qx'){
     for(var i=0;i<checkbox.length;i++){
   checkbox[i].checked=true;
   }
   }
   if(type=='qxqx'){
     for(var i=0;i<checkbox.length;i++){
   checkbox[i].checked=false;
   }
   }
   if(type=='fx'){
  for(var i=0;i<checkbox.length;i++){
     if(checkbox[i].checked){
   checkbox[i].checked=false;
   }else{
   checkbox[i].checked=true;
    }
   }
   }
}
function del(){
//获取所有的行
var input=document.getElementsByTagName("input");
//var checkbox=document.getElementsByName("di");

for(var i=input.length-5;i>=1;i--){

//for(var t=1;t<trs.length;t++){
   if(input[i].checked==true){
    //执行删除
    //alert("ffffff");
   var td=input[i].parentNode;
   var tr=td.parentNode;
   var table=tr.parentNode;


    table.removeChild(tr);
    //}
    }
}

}
</script>
</head>

<body οnlοad="changeColor()">
<table width="500" border="0">
<tr class="top">
    <th width="80"><input type="checkbox" name="di">全选</th>
    <th width="88">姓名</th>
    <th width="144">邮件名称</th>
    <th>邮件附属信息</th>
</tr>
<tr>
    <td><input type="checkbox" name="di" value="2"></td>
    <td>张丹</td>
    <td>张丹的邮件</td>
    <td>张丹的邮件</td>
</tr>
<tr>
    <td><input type="checkbox" name="di" value="3"></td>
    <td>张三</td>
    <td>张三的邮件</td>
    <td>张三的邮件</td>
</tr>
<tr>
    <td><input type="checkbox" name="di" value="4"></td>
    <td>李四</td>
    <td>李四的邮件</td>
    <td>李四的邮件</td>
</tr>
<tr>
    <td><input type="checkbox" name="di"value="5"></td>
    <td>李宁</td>
    <td>李宁的邮件</td>
    <td>李宁的邮件</td>
</tr>
    <tr>
    <td><input type="checkbox" name="di" value="6"></td>
    <td>李彩</td>
    <td>李彩的邮件</td>
    <td>李彩的邮件</td>
</tr>
<tr>
    <td><input type="checkbox" name="di" value="7"></td>
    <td>王五</td>
    <td>王五的邮件</td>
    <td>王五的邮件</td>
</tr>
<tr>
    <td><input type="checkbox" name="di" value="8"></td>
    <td>王东方</td>
    <td>王东方的邮件</td>
    <td>王东方的邮件</td>
</tr>
    <tr>
    <td><input type="checkbox" name="di" 9></td>
    <td>贾宇</td>
    <td>贾宇的邮件</td>
    <td>贾宇的邮件</td>
</tr>
<tr>
    <td><input type="checkbox" name="di" value="10"></td>
    <td>金金</td>
    <td>金金的邮件</td>
    <td>金金的邮件</td>
</tr>
<tr class="top">
    <td><input type="checkbox" id="di" value="1"/>全选</td>
    <td colspan="3" align="center">
    <input type="submit" value="全选" οnclick="cho('qx')">
    <input type="submit" value="删除" οnclick="del()">
    <input type="submit" value="取消全选" οnclick="cho('qxqx')">
    <input type="submit" value="反选"   οnclick="cho('fx')">
    </td>
</tr>

</table>