问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

js表格高亮问题

头像
横向平线
    1025

    为什么这个js对表格第一行没作用
    html

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Document Object Model</title>
        <link rel="Stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <table>
            <caption>ltinerary</caption>
            <tr>
                <th>When</th>
                <th>Where</th>
            </tr>
            <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>
        </table>
        <script src="display.js"></script>
    </body>
</html>

    css

    body{
    font-family:"Helvetica","Arial",sans-serif;
    font-size:18pt;
    }
table{
    margin:10px;
    border:1px solid #699;
    }
caption{
    padding:0.2em;
    text-align:center;
    font-weight:bold;
    font-size:1.2em;
    }
th{
    font-weight:normal;
    font-style:italic;
    text-align:left;
    border:1px dotted #669;
    background-color:#9cc;
    color:#000;
    }
th,td{
    width:10em;
    padding:0.5em;
    }

    js

    function heightlightRows(){
    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 = heightlightRows;
    javascript
    阅读 2.5k
    1 个回答
    得票最新
    头像
    张京
      13.4k61442
      ✓ 已被采纳

      因为你在css里写死了th的font-weight是normal，而你在js里只是改变tr的font-weight为bold，所以不起作用。改成这样就可以了：

      for (var i = 0; i < rows.length; i++) {
  rows[i].onmouseover = function() {
    var ths = this.getElementsByTagName("th");
    for (var j = 0; j < ths.length; j++) {
      ths[j].style.fontWeight = 'bold';
    }
    this.style.fontWeight = "bold";
  }
  rows[i].onmouseout = function() {
    var ths = this.getElementsByTagName("th");
    for (var j = 0; j < ths.length; j++) {
      ths[j].style.fontWeight = 'normal';
    }
    this.style.fontWeight = "normal";
  }
}
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题