社群
學習
工具庫
AI工具
休閒
搜尋
繁体中文
javascript - JS中根据根据标签获取元素的未知问题
迷茫
迷茫 2017-04-10 15:15:30
0
4
345

<!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>

学号 姓名 操作
迷茫
迷茫

业精于勤，荒于嬉;行成于思，毁于随。

全部回覆(4)
黄舟
黄舟2017-04-10 15:17:30 4樓

<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开发者工具截图：

點贊 +0
新增回覆
大家讲道理
大家讲道理2017-04-10 15:17:30 3樓

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

點贊 +0
新增回覆
伊谢尔伦
伊谢尔伦2017-04-10 15:17:30 2樓

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

點贊 +0
新增回覆
PHPzhong
PHPzhong2017-04-10 15:17:30 1樓

我把你的代码拷贝下来，补了缺失的 <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>
點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板