search

Home  >  Q&A  >  body text

javascript - JS中根据根据标签获取元素的未知问题

<!DOCTYPE html>
<html>
<head>
<title> new document </title>

<script type="text/javascript">
// 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
function changebg(){
var table = document.getElementById('table');
var trlist=document.getElementsByTagName("tr");
document.write(trlist.length);//运行结果是0？这里运行结果为什么是0，明明有tr标签啊！求解
for(var i=0;i<trlist.length;i++){
trlist[i].style.backgroundColor="gray";
}
}
</script>
</head>
<body>






   <tr onmouseover="changebg()" onmouseout="cancelbg()" id="t1">
    <td>xh001</td>
    <td>王小明</td>
    <td><a href="javascript:;" >删除</a></td>   <!--在删除按钮上添加点击事件  -->
   </tr>

   <tr>
    <td>xh002</td>
    <td>刘小芳</td>
    <td><a href="javascript:;" >删除</a></td>   <!--在删除按钮上添加点击事件  -->
   </tr>  

   </table>
   <input type="button" value="添加一行" onclick="addOne()" />   <!--在添加按钮上添加点击事件  -->

</body>
</html>

学号 姓名 操作
迷茫迷茫2897 days ago334

reply all(4)I'll reply

  • 黄舟

    黄舟2017-04-10 15:17:30

    <tr>不能够单独使用，必须包含在<table>,<tbody>,<tfoot>里面。否则浏览就只会解析里面的内容。

    下面是 mdn 的对<tr>的Tag omission描述：

    The start tag is mandatory. The end tag may be omitted if the

    element is immediately followed by a element, or if the parent table group (, or ) element doesn't have any more content.

    你看如果不把<tr>包含在<table>等标签内的话，浏览器解析会是这样：

    代码：

    <body>
    <tr>
        <td>哈啊哈哈哈哈哈哈</td>
    </tr>
    <tr>
        <td>2333333333333333</td>
    </tr>
    <button type="button" onclick="showTrLength()">点击</button>
</body>

    chrome开发者工具截图：

    reply
    0
  • 大家讲道理

    大家讲道理2017-04-10 15:17:30

    没发现有问题，返回的是2

    reply
    0
  • 伊谢尔伦

    伊谢尔伦2017-04-10 15:17:30

    你的<script>标签是放在body前面的吗？？？如果是，那么可能是因为你没有加document.onload.

    reply
    0
  • PHPz

    PHPz2017-04-10 15:17:30

    我把你的代码拷贝下来，补了缺失的 <table> 标签，运行得很好啊

    html<!DOCTYPE html>
<html>

<head>
    <title> new document </title>
    <script type="text/javascript">
    // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
    function changebg() {
        var table = document.getElementById('table');
        var trlist = document.getElementsByTagName("tr");
        document.write(trlist.length); //运行结果是0？这里运行结果为什么是0，明明有tr标签啊！求解
        for (var i = 0; i < trlist.length; i++) {
            trlist[i].style.backgroundColor = "gray";
        }
    }
    </script>
</head>

<body>
    <table id="table">
        <tr onmouseover="changebg()" onmouseout="cancelbg()" id="t1">
            <td>xh001</td>
            <td>王小明</td>
            <td><a href="javascript:;">删除</a></td>
            <!--在删除按钮上添加点击事件  -->
        </tr>
        <tr>
            <td>xh002</td>
            <td>刘小芳</td>
            <td><a href="javascript:;">删除</a></td>
            <!--在删除按钮上添加点击事件  -->
        </tr>
    </table>
    <input type="button" value="添加一行" onclick="addOne()" />
    <!--在添加按钮上添加点击事件  -->
</body>

</html>

    reply
    0
  • Cancelreply