用JavaScript当用鼠标勾选一个CHECKBOX时，表格中对应的一行背景色变为黄色，文字字体变为红色粗体

最新推荐文章于 2022-07-20 13:19:57 发布

lijunlinlijunlin

最新推荐文章于 2022-07-20 13:19:57 发布

阅读量1.9k

点赞数

分类专栏：面试

面试专栏收录该内容

34 篇文章 0 订阅

订阅专栏

<table border="1">
<tr><td><input type="checkbox"></td><td>1111111</td></tr>
<tr><td><input type="checkbox"></td><td>2222222</td></tr>
<tr><td><input type="checkbox"></td><td>3333333</td></tr>
<tr><td><input type="checkbox"></td><td>4444444</td></tr>
</table>
<script>
var chkBoxs = document.getElementsByTagName("input");
for(var i=0;i<chkBoxs.length;i++){
 chkBoxs[i].οnclick=function(){
  tdText = this.parentNode.parentNode.childNodes[1];
  if(this.checked){
   tdText.style.fontWeight = "bold";
   tdText.style.color = "red";
   tdText.style.background = "yellow";
  }else{
   tdText.style.fontWeight = "normal";
   tdText.style.color = "black";
   tdText.style.background = "white";
  }
 };
}
</script>





<!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=gb2312" />
<title>翔</title>
<script language="javascript">
 function change(){
  if(document.getElementById("changes").checked==true){
   document.getElementById("change").style.backgroundColor="#0000FF";
   document.getElementById("change").style.fontWeight="bold";
  }else if(document.getElementById("changes").checked==false){ //点击取消的时候叫他恢复样式
   document.getElementById("change").style.backgroundColor="#ffffff";
   document.getElementById("change").style.fontWeight="normal";
  }
 }
</script>
</head>
<body>
 <input type="checkbox" id="changes" οnclick="change()" />
 <table border="1">
  <tr>
   <td id="change">哈哈,样式变了哦</td>
  </tr>
 </table>
</body>
</html>

lijunlinlijunlin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用JavaScript当用鼠标勾选一个CHECKBOX时，表格中对应的一行背景色变为黄色，文字字体变为红色粗体

1111111222222233333334444444var chkBoxs = document.getElementsByTagName("input");for(var i=0;i<chkBoxs.length;i++){ chkBoxs[i].onclick=function(){ tdText = this.parentNode.parentNode.childNo
复制链接

扫一扫