为什么这段js代码出不了效果？
<!doctypehtml><html><head><metacharset="UTF-8"><title>宠物体重表</title><style>body{font-f...
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>宠物体重表</title>
<style>
body{font-family:"Arial",sans-serif; background-color:#fff;color:#383636}
table{margin:auto;border:1px solid #383636;margin-top:100px}
caption{margin:auto;padding:0.2em;font-size:1.5em;font-weight:bold;}
th{font-wight:normal;text-align:center;border:1px dotted #383636;color:#383636;font-size:1.2em;}
th,td{width:10em;padding:0.5em}
</style>
</head>
<body>
<table>
<caption>我家宠物体重表</caption>
<thead>
<tr>
<th>名字</th>
<th>体重</th>
<th>颜值</th>
</tr>
</thead>
<tbody>
<tr>
<th>贝贝</th>
<th>3.5公斤</th>
<th>100</th>
</tr>
<tr>
<th>大白</th>
<th>8公斤</th>
<th>90</th>
</tr>
<tr>
<th>小球</th>
<th>7公斤</th>
<th>90</th>
</tr>
<tr>
<th>威威</th>
<th>6公斤</th>
<th>80</th>
</tr>
<tr>
<th>面面</th>
<th>100公斤</th>
<th>－100</th>
</tr>
</tbody>
</thead>
</table>
<script src="highlightRows.js"></script>
</body>
</html>
function highlightRows(){
if(!document.getElementsByTagName) return false;
var rows=document.getElementsByTagName("tr");
for(var i=0;i<rows.length;i++){
rows[i].onmouseover=function(){
this.style.fontWeight="bold";
}
rows[i].onmouseout=function(){
this.style.fontWeight="normal";
}
}
}
window.onload=hightlightRows; 展开
<html>
<head>
<meta charset="UTF-8">
<title>宠物体重表</title>
<style>
body{font-family:"Arial",sans-serif; background-color:#fff;color:#383636}
table{margin:auto;border:1px solid #383636;margin-top:100px}
caption{margin:auto;padding:0.2em;font-size:1.5em;font-weight:bold;}
th{font-wight:normal;text-align:center;border:1px dotted #383636;color:#383636;font-size:1.2em;}
th,td{width:10em;padding:0.5em}
</style>
</head>
<body>
<table>
<caption>我家宠物体重表</caption>
<thead>
<tr>
<th>名字</th>
<th>体重</th>
<th>颜值</th>
</tr>
</thead>
<tbody>
<tr>
<th>贝贝</th>
<th>3.5公斤</th>
<th>100</th>
</tr>
<tr>
<th>大白</th>
<th>8公斤</th>
<th>90</th>
</tr>
<tr>
<th>小球</th>
<th>7公斤</th>
<th>90</th>
</tr>
<tr>
<th>威威</th>
<th>6公斤</th>
<th>80</th>
</tr>
<tr>
<th>面面</th>
<th>100公斤</th>
<th>－100</th>
</tr>
</tbody>
</thead>
</table>
<script src="highlightRows.js"></script>
</body>
</html>
function highlightRows(){
if(!document.getElementsByTagName) return false;
var rows=document.getElementsByTagName("tr");
for(var i=0;i<rows.length;i++){
rows[i].onmouseover=function(){
this.style.fontWeight="bold";
}
rows[i].onmouseout=function(){
this.style.fontWeight="normal";
}
}
}
window.onload=hightlightRows; 展开
3个回答
展开全部
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>宠物体重表</title>
<style>
body {
font-family: "Arial",sans-serif;
background-color: #fff;
color: #383636
}
table {
margin: auto;
border: 1px solid #383636;
margin-top: 100px;
border-collapse: collapse;
}
caption {
margin: auto;
padding: 0.2em;
font-size: 1.5em;
font-weight: bold;
}
tr {
font-weight: normal;
cursor: pointer;
}
th {
text-align: center;
border: 1px dotted #383636;
color: #383636;
font-size: 1.2em;
}
th,td {
width: 10em;
padding: 0.5em;
border: 1px solid black;
}
</style>
<script>
function hightlightRows() {
var rows = document.getElementsByTagName("tr");
for (var i = 0; i < rows.length; i++) {
rows[i].onmouseover = function() {
this.style.fontWeight = "bolder";
}
rows[i].onmouseout = function() {
this.style.fontWeight = "normal";
}
}
}
window.onload = hightlightRows;
</script>
</head>
<body>
<table>
<caption>我家宠物体重表</caption>
<thead>
<tr>
<th>名字</th>
<th>体重</th>
<th>颜值</th>
</tr>
</thead>
<tbody>
<tr>
<td>贝贝</td>
<td>3.5公斤</td>
<td>100</td>
</tr>
<tr>
<td>大白</td>
<td>8公斤</td>
<td>90</td>
</tr>
<tr>
<td>小球</td>
<td>7公斤</td>
<td>90</td>
</tr>
<tr>
<td>威威</td>
<td>6公斤</td>
<td>80</td>
</tr>
<tr>
<td>面面</td>
<td>100公斤</td>
<td>－100</td>
</tr>
</tbody>
</table>
</body>
</html>
更多追问追答
追问
你是只把bold改成bolder吗？这个我之前试过，都不行阿。你还改了哪里？
追答
th------------->td
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你修改的tr的css样式，可是你又定义了th的font-weight样式。所以没起作用。你JS里需要修改的th的样式，不是tr的样式，附上代码更换下就可以了
function highlightRows(){
if(!document.getElementsByTagName) return false;
var rows=document.getElementsByTagName("tr");
for(var i=0;i<rows.length;i++){
rows[i].onmouseover=function(){
var columns=this.getElementsByTagName("th");
for(var j=0;j<columns.length;j++){columns[j].style.fontWeight="bold";}
}
rows[i].onmouseout=function(){
var columns=this.getElementsByTagName("th");
for(var j=0;j<columns.length;j++){columns[j].style.fontWeight="normal";}
}
}
}
function highlightRows(){
if(!document.getElementsByTagName) return false;
var rows=document.getElementsByTagName("tr");
for(var i=0;i<rows.length;i++){
rows[i].onmouseover=function(){
var columns=this.getElementsByTagName("th");
for(var j=0;j<columns.length;j++){columns[j].style.fontWeight="bold";}
}
rows[i].onmouseout=function(){
var columns=this.getElementsByTagName("th");
for(var j=0;j<columns.length;j++){columns[j].style.fontWeight="normal";}
}
}
}
追问
为什么不能直接点到行就变粗阿？我跟书上的对过一样的，为什么我的出不来效果？
追答
这就不清楚为什么点击会有效果了，理论上点击也是无效果的，书上这段写错了。CSS样式本来就是从近到远的，本身有样式，你更改了上一级的样式，是没有效果的
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
if(!document.getElementsByTagName) return false;
document.getElementsByTagName 这句话什么都没有。错误执行
例如：document.getElementsByTagName("name");
document.getElementsByTagName 这句话什么都没有。错误执行
例如：document.getElementsByTagName("name");
追问
不是的，书上是这样子写的，是为了平稳退化，表示检查浏览器能否用到这个dom方法。这句是没错的，我可以肯定。具体你看dom编程艺术那本书。
追答
呃
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
