鼠标移到表格的行上，行高亮

最新推荐文章于 2021-08-24 17:16:09 发布

justdoit1024

最新推荐文章于 2021-08-24 17:16:09 发布

阅读量388

点赞数

分类专栏： web前端文章标签： Java

本文链接：https://blog.csdn.net/shiyong2008/article/details/83468184

版权

web前端专栏收录该内容

26 篇文章 0 订阅

订阅专栏

<html>
  <head>
    <title>表格行高亮</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">
    	/**
    	鼠标移到行上，此行背景变为粉红，鼠标移开，背景颜色消失
    	*/
    	function changeBgcolor(tr,num){
    		if(num==1){

    			 if(tr.bgColor != "yellow"){
    			 		tr.bgColor = "pink";
    			 }    			
    		}else if(num == 2){

    			 if(tr.bgColor != "yellow"){
    			 		tr.bgColor = "";
    			 } 
    		}
    	}

    	//全选
    	function selAll(){
    		var size = 3;//实际的行数

    		if(document.getElementById("checkbox0").checked == true){
					for(i=0;i<size;i++){
    			  if(!document.getElementById("checkbox"+i).checked == true){
    				  document.getElementById("checkbox"+i).checked = true;
    			  }
    			  document.getElementById("line1").bgColor = "yellow";
    			  document.getElementById("line2").bgColor = "yellow";
    		  }	
    		}else{
    			for(i=0;i<size;i++){
    				 document.getElementById("checkbox"+i).checked = false; 
    				 document.getElementById("line1").bgColor = "";
    				 document.getElementById("line2").bgColor = "";
    		  }
    		}
    	}

    	//选中行，行背景颜色变为黄色
    	function selected(checkboxId,trId){
    			if(document.getElementById(checkboxId).checked == true){
    				document.getElementById(trId).bgColor = "yellow";
    			}else{
    				document.getElementById(trId).bgColor = "";
    			}
    	}
    </script>
  </head>

  <body>
    <table border="1">
    	<tr>
    		<td>
    			<input type="checkbox" id="checkbox0" onclick="selAll()">
    		</td>
    		<td>
    			标题
    		</td>
    		<td>
    			内容
    		</td>
    	</tr>
    	<tr id="line1" onmouseover="changeBgcolor(this,1)" onmouseout="changeBgcolor(this,2)">
    		<td>
    			<input type="checkbox" id="checkbox1" onclick="selected('checkbox1','line1')">
    		</td>
    		<td>
    			js技术
    		</td>
    		<td>
    			js非常重要
    		</td>
    	</tr>
    	<tr id="line2" onmouseover="changeBgcolor(this,1)" onmouseout="changeBgcolor(this,2)">
    		<td>
    			<input type="checkbox" id="checkbox2" onclick="selected('checkbox2','line2')">
    		</td>
    		<td>
    			Java学习
    		</td>
    		<td>
    			Java博大精深
    		</td>
    	</tr>
    </table>
  </body>
</html>

justdoit1024

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
鼠标移到表格的行上，行高亮

[code="java"] 表格行高亮 /** 鼠标移到行上，此行背景变为粉红，鼠标移开，背景颜色消失 */ function changeBgcolor(tr,num){ if(num==1){ if(tr.bgColor != "yellow"){ ...
复制链接

扫一扫

专栏目录