onclick事件

最新推荐文章于 2024-04-21 06:35:01 发布

runrunsang

最新推荐文章于 2024-04-21 06:35:01 发布

阅读量200

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_41898663/article/details/80048423

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
//全选，全不选
function checkall(chk){
//全选是否被选中打钩 ischeck true 没打勾 ischeck false
var ischeck=chk.checked;
//获取页面除了全选以外的复选框
var list=document.getElementsByName('chkstu');
for(var i=0;i<list.length;i++){
var mychk=list[i];
mychk.checked=ischeck;
}
}
window.οnlοad=function(){
var trlist=document.getElementsByTagName('tr');
//循环给每一个tr添加 onmouseover和onmouseout事件
for( var i=1;i<trlist.length;i++){
var mytr=trlist[i];
var oldbgcolor='';
mytr.οnmοuseοver=function(){
//给tr修改背景颜色以前保存原来背景色到变量里
oldbgcolor=this.style.background;
//鼠标离开tr时背景色恢复原来的颜色
this.style.background='pink';

}
mytr.οnmοuseοut=function(){
this.style.background=oldbgcolor;
}
}
function getValue(){
//多选按钮的获取
var duoxuan=document.getElementsByName("chkstu");//获得的是集合
var duo="";
for(var i in duoxuan){//使用for循环遍历集合
if(duoxuan[i].cheked==true){
duo=duoxuan[i].value;
duo+="";

}

}
//单选按钮的获取
var sex=document.getElementsByName("sex");//获得的是集合
var s="";
for(var i in sex){//使用for循环遍历集合
if(sex[i].cheked==true){
s=sex[i].value;
}

}
//数据的获取
var name ,age;//定义变量
name=document.getElementById("userName").vlue;
age=document.getElementById("age").vlue;

}
//添加信息
src="<td>"+duo+"</td>>td>"+name+"</td><td>"+sex+"</td><td>"+age+"</td>";
//将值赋给id=2的<tr>
document.getElementById(number).innerHTML=src;
}

</script>
<style type="text/css">
table {
width: 400px;
border: 1px solid black;
margin: 100px auto;
text-align: center;
border-collapse: collapse;
}
tr {
border: 1px solid black;
}
td {
border: 1px solid black;
width: 100px;
}
.beijing {
background-color: pink;
}
</style>
</head>
<body>
<table>
<tr>
<td><input type='checkbox' οnclick='checkall(this)'>
全选</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr class="beijing">
<td ><input type='checkbox' name='chkstu'></td>
<td>张三</td>
<td>男</td>
<td>40</td>
</tr>
<tr>
<td><input type='checkbox' name='chkstu'></td>
<td>李四</td>
<td>男</td>
<td>30</td>
</tr>
<tr class="beijing">
<td><input type='checkbox' name='chkstu'></td>
<td>王五</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td><input type='checkbox' name='chkstu'></td>
<td>刘五</td>
<td>男</td>
<td>10</td>
</tr>
<tr id="2"></tr>
</table>

<table>
<tr class="beijing">
<td>姓名</td>
<td><input type='text' id='userName'></td>
</tr>
<tr>
<td>性别</td>
<td><input type="radio" name="sex" value="男">
男
<input type="radio" name="sex" value="女">
女</td>
</tr>
<tr class="beijing">
<td>年龄</td>
<td><input type='text' id='age'></td>
</tr>
<tr>
<td colspan="2" align="center">
</td>
</tr>
</table>
</body>
</html>

runrunsang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
onclick事件

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt;Document&lt;/title&gt;&lt;script type="text/javascript"&gt; //全选，全不选 funct
复制链接

扫一扫