首页新闻找找看学习计划

HTML中thead和tbody中的tr不是一种吗?

0
悬赏园豆:10 [待解决问题]

最近在学习JavaScriptDOM有段代码运行我很困惑:

这是body部分的代码:

<body>
  <table>
    <caption>Itinerary</caption>
    <thead>
    <tr>
      <th>When</th>
      <th>Where</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td>June 9th</td>
      <td>Portland, <abbr title="Oregon">OR</abbr></td>
    </tr>
    <tr>
      <td>June 10th</td>
      <td>Seattle, <abbr title="Washington">WA</abbr></td>
    </tr>
    <tr>
      <td>June 12th</td>
      <td>Sacramento, <abbr title="California">CA</abbr></td>
    </tr>
    </tbody>

有段js:

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";
    }
  }
}
addLoadEvent(highlightRows);

css代码我就不贴了,最后在浏览器的显示状态是这样:

 

鼠标放在下面3个row上面才会有字体变粗的效果,但是第一个thead部分的row就不行,希望大家能告知一下原因,谢谢啦

爱吃冰淇淋的喵的主页 爱吃冰淇淋的喵 | 初学一级 | 园豆:183
提问于:2018-05-13 10:55
< >
分享
所有回答(1)
0

是能获取到thead里面的tr的,上面的getElement的结果是4个tr。我在本地测试结果是th的tr字体不变normal,是因为th也有设置字体样式,于是hover没有覆盖样式成功。

随风行云 | 园豆:389 (菜鸟二级) | 2018-05-13 12:49

后来我想了想觉得可能是因为js中的操作是针对于tr而言,但是css中预先对th进行了设置,而仅仅通过js操作th的父元素节点是无法影响到th本身的。

支持(0) 反对(0) 爱吃冰淇淋的喵 | 园豆:183 (初学一级) | 2018-05-14 07:44

我试着把下面tbody中tr的td加了个font-weight=normal,发现同样不能被js覆盖到,应该是这种情况了。

支持(0) 反对(0) 爱吃冰淇淋的喵 | 园豆:183 (初学一级) | 2018-05-14 07:45
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册