向大家求解以下问题，谢谢大家~

tooyangtoosimple_ 2016-03-13 10:36:10

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
body{
font-family:"Helvetical","Arial",sans-serif;
background-color:#fff;
color:#000;
}
table{
margin:auto;
border:1px solid #699;
}
caption{
margin:auto;
padding:.2em;
font-size:1.2em;
font-weight:bold;
}
th{
font-weight:normal;
font-style:italic;
text-align:left;
border:1px dotted #699;
background-color:#9cc;
color:#000;
}
th,td{
width:10em;
padding:.5em;
}
.intro{
font-weight:bold;
}
.odd{
background-color: #ffc;
}
</style>
</head>
<body>
<table>
<caption>Itinerary</caption>
<thead>
<tr>
<th>When</th><th>Where</th>
</tr>
</thead>
<tbody>
<tr>
<td>June 9th</td><td>Portland.OR</td>
</tr>
<tr>
<td>June 10th</td><td>Seattle.WA</td>
</tr>
<tr>
<td>June 12th</td><td>Sacramento.CA</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
//添加加载函数
function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != "function"){
window.onload = func;
}else{
window.onload = function(){
oldonload();
func();
}
}
}
//设置表格样式
function stripeTable(){
if(!document.getElementsByTagName) return false;
var tables = document.getElementsByTagName("table");
var odd,rows;
for(var i=0;i<tables.length;i++){
odd = false;
rows = tables[i].getElementsByTagName("tr");
for(var j = 0;j<rows.length;j++){
if(odd==true){
addClass(rows[j],"odd");
odd= false;
}else{
odd = true;
}
rows[j].onmouseover = function(){ //问题1：为什么鼠标放在第一行上，第一行字体并没有加粗？
//问题2：为不能换成addClass(rows[j],"intro");控制台会提示element未定义???
this.style.fontWeight = "bold";
}
rows[j].onmouseout = function(){
this.style.fontWeight = "normal";
}
}
}
}

//增加样式
function addClass(element,value){
if(!element.className){
element.className = value;
}else{
var newClassName = element.className;
newClassName += " ";
newClassName += value;
element.className = newClassName;
}

}
addLoadEvent(stripeTable);
</script>
</body>
</html>

...全文

184 4 打赏收藏举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

tooyangtoosimple_ 2016-03-15

打赏
举报

引用 1 楼 superwfei 的回复:

			rows[j].onmouseover = function(){  //问题1：为什么鼠标放在第一行上，第一行字体并没有加粗？
			//问题2：为不能换成addClass(rows[j],"intro");控制台会提示element未定义??? 
				this.style.fontWeight = "bold";                              
			}
问题1：第一行没有变色是因为你将样式定义加到了 tr 上，但是 th 有自己的定义，然后 th 的定义比 tr 的定义更接近文字，所以 th 样式生效问题2： onmouseover 触发事件后，执行的必报函数中没有继承自定义时的变量，所以应该写作 addClass(this,'intro')，因为 this 在必报中代表的就是触发该方法的对象另外，不要把问题放到代码里，我找你提的问题都瞅了很久

非常感谢您的回答~~谢谢！

tooyangtoosimple_ 2016-03-15

打赏
举报

引用 2 楼 superwfei 的回复:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
body{
	font-family:"Helvetical","Arial",sans-serif;
	background-color:#fff;
	color:#000;
}
table{
	margin:auto;
	border:1px solid #699;
}
caption{
	margin:auto;
	padding:.2em; 
	font-size:1.2em;
	font-weight:bold;
}
th{
	font-weight:normal;
	font-style:italic;
	text-align:left;
	border:1px dotted #699;
	background-color:#9cc;
}
th,td{
	width:10em;
	padding:.5em;
}
.intro,.intro th{ /* 样式定义中追加tr下th的内容 */
	font-weight:bold;
}
.odd{
	background-color: #ffc;
}
</style>
</head>
<body>
<table>
	<caption>Itinerary</caption>
	<thead>
		<tr>
			<th>When</th><th>Where</th>
		</tr>
	</thead>
	<tbody>
		<tr>
		<td>June 9th</td><td>Portland.OR</td>
		</tr>
		<tr>
		<td>June 10th</td><td>Seattle.WA</td>
		</tr>
		<tr>
		<td>June 12th</td><td>Sacramento.CA</td>
		</tr>
	</tbody>
</table>  
<script type="text/javascript">
//添加加载函数
function addLoadEvent(func){
	var oldonload = window.onload;
	if(typeof window.onload != "function"){
		window.onload = func;
	}else{
		window.onload = function(){
			oldonload();
			func();
		}
	}
}   
//设置表格样式
function stripeTable(){
	if(!document.getElementsByTagName) return false;
	var tables = document.getElementsByTagName("table");
	var odd,rows;
	for(var i=0;i<tables.length;i++){        
		odd = false;
		rows = tables[i].getElementsByTagName("tr");
		for(var j = 0;j<rows.length;j++){
			if(odd==true){
				addClass(rows[j],"odd");
				odd= false;
			}else{
				odd = true;        
			}
			rows[j].onmouseover = function(){
				addClass(this,'intro');
			}
			rows[j].onmouseout = function(){
				removeClass(this,'intro')
			}        
		}
	}
}

//增加样式
function addClass(element,value){
	if(!element.className){
		element.className = value;
	}else{
		var newClassName = element.className;
		newClassName += " ";
		newClassName += value;
		element.className = newClassName;
	}

}
// 追加移除样式的内容
function removeClass(el,cls){
	el.className = el.className.replace(new RegExp('\s*' + cls + '\s*','gi'),'');
}
addLoadEvent(stripeTable); 
</script>
</body>
</html>

非常感谢

文盲老顾 2016-03-13

打赏
举报

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
body{
	font-family:"Helvetical","Arial",sans-serif;
	background-color:#fff;
	color:#000;
}
table{
	margin:auto;
	border:1px solid #699;
}
caption{
	margin:auto;
	padding:.2em; 
	font-size:1.2em;
	font-weight:bold;
}
th{
	font-weight:normal;
	font-style:italic;
	text-align:left;
	border:1px dotted #699;
	background-color:#9cc;
}
th,td{
	width:10em;
	padding:.5em;
}
.intro,.intro th{ /* 样式定义中追加tr下th的内容 */
	font-weight:bold;
}
.odd{
	background-color: #ffc;
}
</style>
</head>
<body>
<table>
	<caption>Itinerary</caption>
	<thead>
		<tr>
			<th>When</th><th>Where</th>
		</tr>
	</thead>
	<tbody>
		<tr>
		<td>June 9th</td><td>Portland.OR</td>
		</tr>
		<tr>
		<td>June 10th</td><td>Seattle.WA</td>
		</tr>
		<tr>
		<td>June 12th</td><td>Sacramento.CA</td>
		</tr>
	</tbody>
</table>  
<script type="text/javascript">
//添加加载函数
function addLoadEvent(func){
	var oldonload = window.onload;
	if(typeof window.onload != "function"){
		window.onload = func;
	}else{
		window.onload = function(){
			oldonload();
			func();
		}
	}
}   
//设置表格样式
function stripeTable(){
	if(!document.getElementsByTagName) return false;
	var tables = document.getElementsByTagName("table");
	var odd,rows;
	for(var i=0;i<tables.length;i++){        
		odd = false;
		rows = tables[i].getElementsByTagName("tr");
		for(var j = 0;j<rows.length;j++){
			if(odd==true){
				addClass(rows[j],"odd");
				odd= false;
			}else{
				odd = true;        
			}
			rows[j].onmouseover = function(){
				addClass(this,'intro');
			}
			rows[j].onmouseout = function(){
				removeClass(this,'intro')
			}        
		}
	}
}

//增加样式
function addClass(element,value){
	if(!element.className){
		element.className = value;
	}else{
		var newClassName = element.className;
		newClassName += " ";
		newClassName += value;
		element.className = newClassName;
	}

}
// 追加移除样式的内容
function removeClass(el,cls){
	el.className = el.className.replace(new RegExp('\s*' + cls + '\s*','gi'),'');
}
addLoadEvent(stripeTable); 
</script>
</body>
</html>

文盲老顾 2016-03-13

打赏
举报

			rows[j].onmouseover = function(){  //问题1：为什么鼠标放在第一行上，第一行字体并没有加粗？
			//问题2：为不能换成addClass(rows[j],"intro");控制台会提示element未定义??? 
				this.style.fontWeight = "bold";                              
			}

问题1：第一行没有变色是因为你将样式定义加到了 tr 上，但是 th 有自己的定义，然后 th 的定义比 tr 的定义更接近文字，所以 th 样式生效问题2： onmouseover 触发事件后，执行的必报函数中没有继承自定义时的变量，所以应该写作 addClass(this,'intro')，因为 this 在必报中代表的就是触发该方法的对象另外，不要把问题放到代码里，我找你提的问题都瞅了很久