javascript className 改变不了
在<head>里定义:<scripttype="text/javascript">functionsel0(){document.getElementByName('se...
在<head>里定义:
<script type="text/javascript">
function sel0(){
document.getElementByName('sel0').className='selecttr';
//alert('mama');
}
</script>
在表格里为什么改变不了?
<tr name="sel0" class="" onmouseover="sel0()">
<td>Tlv</td>
<td>2</td>
<td>5</td>
<td>9</td>
<td >9</td>
</tr>
我的要求是鼠标经过<td>元素的时候改变<tr>元素的class属性,要有表格,表格中加<div>好象实现不了 展开
<script type="text/javascript">
function sel0(){
document.getElementByName('sel0').className='selecttr';
//alert('mama');
}
</script>
在表格里为什么改变不了?
<tr name="sel0" class="" onmouseover="sel0()">
<td>Tlv</td>
<td>2</td>
<td>5</td>
<td>9</td>
<td >9</td>
</tr>
我的要求是鼠标经过<td>元素的时候改变<tr>元素的class属性,要有表格,表格中加<div>好象实现不了 展开
4个回答
展开全部
document.getElementByName('sel0').className='selecttr';
你这句分开写,然后用alert 测试下。
或者在:
<tr name="sel0" class="" onmouseover="sel0(this)" onmouseout="****">
然后在sel0方法中
吧传进来的那个对象class改变,然后在写一个out的方法.
也不知我说的对不对,你还是看例子吧:
<html>
<head>
<title>Member List</title>
<style>
<!--
.datalist{
border:1px solid #0058a3; /* 表格边框 */
font-family:Arial;
border-collapse:collapse; /* 边框重叠 */
background-color:#eaf5ff; /* 表格背景色 */
font-size:14px;
}
.datalist caption{
padding-bottom:5px;
font:bold 1.4em;
text-align:left;
}
.datalist th{
border:1px solid #0058a3; /* 行名称边框 */
background-color:#4bacff; /* 行名称背景色 */
color:#FFFFFF; /* 行名称颜色 */
font-weight:bold;
padding-top:4px; padding-bottom:4px;
padding-left:12px; padding-right:12px;
text-align:center;
}
.datalist td{
border:1px solid #0058a3; /* 单元格边框 */
text-align:left;
padding-top:4px; padding-bottom:4px;
padding-left:10px; padding-right:10px;
}
.datalist tr:hover, .datalist tr.altrow{
background-color:#c4e4ff; /* 动态变色 */
}
-->
</style>
<style type="text/css">
<!--
body{
background-color:#f8ffd3;
margin:0px; padding:0px;
}
table.banner{
background:url(banner_bg.jpg) repeat-x;
width:100%;
}
table.btn{
background:url(button1_bg.jpg) repeat-x;
width:100%;
}
#navigation{
margin:0px; padding:0px;
list-style-type:none;
height:32px;
font-size:12px;
}
#navigation li{
text-align:center; width:130px; height:32px;
background:url(button1.jpg) repeat-x;
float:left;
}
#navigation li a{
padding:10px 0px 10px 0px;
text-decoration:none;
display:block;
}
#navigation li a:link, #navigation li a:visited{color:#526d00;}
#navigation li a:hover{
color:#FFFFFF;
background:url(button2.jpg) no-repeat;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style></head>
<body>
<table class="datalist" summary="list of members in EE Studay">
<caption>Member List</caption>
<tr>
<th scope="col">Name</th>
<th scope="col">Class</th>
<th scope="col">Birthday</th>
<th scope="col">Constellation</th>
<th scope="col">Mobile</th>
</tr>
<tr>
<td>isaac</td>
<td>W13</td>
<td>Jun 24th</td>
<td>Cancer</td>
<td>1118159</td>
</tr>
<tr>
<td>girlwing</td>
<td>W210</td>
<td>Sep 16th</td>
<td>Virgo</td>
<td>1307994</td>
</tr>
</table>
<script language="javascript">
var rows = document.getElementsByTagName('tr');
for (var i=0;i<rows.length;i++){
rows[i].onmouseover = function(){ //鼠标在行上面的时候
this.className += 'altrow';
}
rows[i].onmouseout = function(){ //鼠标离开时
this.className = this.className.replace('altrow','');
}
}
</script>
</body>
</html>
你这句分开写,然后用alert 测试下。
或者在:
<tr name="sel0" class="" onmouseover="sel0(this)" onmouseout="****">
然后在sel0方法中
吧传进来的那个对象class改变,然后在写一个out的方法.
也不知我说的对不对,你还是看例子吧:
<html>
<head>
<title>Member List</title>
<style>
<!--
.datalist{
border:1px solid #0058a3; /* 表格边框 */
font-family:Arial;
border-collapse:collapse; /* 边框重叠 */
background-color:#eaf5ff; /* 表格背景色 */
font-size:14px;
}
.datalist caption{
padding-bottom:5px;
font:bold 1.4em;
text-align:left;
}
.datalist th{
border:1px solid #0058a3; /* 行名称边框 */
background-color:#4bacff; /* 行名称背景色 */
color:#FFFFFF; /* 行名称颜色 */
font-weight:bold;
padding-top:4px; padding-bottom:4px;
padding-left:12px; padding-right:12px;
text-align:center;
}
.datalist td{
border:1px solid #0058a3; /* 单元格边框 */
text-align:left;
padding-top:4px; padding-bottom:4px;
padding-left:10px; padding-right:10px;
}
.datalist tr:hover, .datalist tr.altrow{
background-color:#c4e4ff; /* 动态变色 */
}
-->
</style>
<style type="text/css">
<!--
body{
background-color:#f8ffd3;
margin:0px; padding:0px;
}
table.banner{
background:url(banner_bg.jpg) repeat-x;
width:100%;
}
table.btn{
background:url(button1_bg.jpg) repeat-x;
width:100%;
}
#navigation{
margin:0px; padding:0px;
list-style-type:none;
height:32px;
font-size:12px;
}
#navigation li{
text-align:center; width:130px; height:32px;
background:url(button1.jpg) repeat-x;
float:left;
}
#navigation li a{
padding:10px 0px 10px 0px;
text-decoration:none;
display:block;
}
#navigation li a:link, #navigation li a:visited{color:#526d00;}
#navigation li a:hover{
color:#FFFFFF;
background:url(button2.jpg) no-repeat;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style></head>
<body>
<table class="datalist" summary="list of members in EE Studay">
<caption>Member List</caption>
<tr>
<th scope="col">Name</th>
<th scope="col">Class</th>
<th scope="col">Birthday</th>
<th scope="col">Constellation</th>
<th scope="col">Mobile</th>
</tr>
<tr>
<td>isaac</td>
<td>W13</td>
<td>Jun 24th</td>
<td>Cancer</td>
<td>1118159</td>
</tr>
<tr>
<td>girlwing</td>
<td>W210</td>
<td>Sep 16th</td>
<td>Virgo</td>
<td>1307994</td>
</tr>
</table>
<script language="javascript">
var rows = document.getElementsByTagName('tr');
for (var i=0;i<rows.length;i++){
rows[i].onmouseover = function(){ //鼠标在行上面的时候
this.className += 'altrow';
}
rows[i].onmouseout = function(){ //鼠标离开时
this.className = this.className.replace('altrow','');
}
}
</script>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
你换成div试试呢,tr不好用吧
<script type="text/javascript">
function sel0(){
var a = document.getElementsByName('sel0');
alert(a);
}
</script>
<body>
<div name="sel0" onmouseover="sel0()">
<td>Tlv</td>
<td>2</td>
<td>5</td>
<td>9</td>
<td >9</td>
</div>
</body>
<script type="text/javascript">
function sel0(){
var a = document.getElementsByName('sel0');
alert(a);
}
</script>
<body>
<div name="sel0" onmouseover="sel0()">
<td>Tlv</td>
<td>2</td>
<td>5</td>
<td>9</td>
<td >9</td>
</div>
</body>
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
<tr name="sel0" class="" onmouseover="this.className='selecttr';">
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
把name 改成 id 吧 那个不标准
<html>
<head>
<style type="text/css">
.selecttr{font-size:20px;}
</style>
</head>
</body>
<script type="text/javascript">
function sel0(){
document.getElementById('sel0').className='selecttr';
//alert('mama');
}
</script>
<body>
<table>
<tr id="sel0" class="" onmouseover="sel0()">
<td>Tlv</td>
<td>2</td>
<td>5</td>
<td>9</td>
<td >9</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<style type="text/css">
.selecttr{font-size:20px;}
</style>
</head>
</body>
<script type="text/javascript">
function sel0(){
document.getElementById('sel0').className='selecttr';
//alert('mama');
}
</script>
<body>
<table>
<tr id="sel0" class="" onmouseover="sel0()">
<td>Tlv</td>
<td>2</td>
<td>5</td>
<td>9</td>
<td >9</td>
</tr>
</table>
</body>
</html>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询