JSDom测试

最新推荐文章于 2024-04-18 09:33:22 发布

原创最新推荐文章于 2024-04-18 09:33:22 发布 · 341 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#JSDom测试

Javascript、JQuery练习专栏收录该内容

69 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
</head>
<body>
    <input type="button" value="load" id="btnLoad"/>
    <input type="button" value="set style" id="btnSetStyle" />
    <table id="table1" border="1" height="10">
        <tr>
            <td><input type="checkbox"/>全选</td>
            <td>歌手</td>
            <td>歌曲</td>
            <td>专辑</td>
        </tr>
        <tr>
            <td><input type="checkbox" />全选</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
    <script type="text/javascript">
        window.onload = function () {
            var jsonData = [{ singer: "张杰", song: "他不懂", album: "《他不懂》" },
                { singer: "张杰", song: "剑心", album: "《剑心》" },
                { singer: "张杰", song: "爱不解释", album: "《爱不解释》" },
                { singer: "张杰", song: "自己", album: "《自己》" }];
            var tableObj=document.getElementById('table1');
            document.getElementById('btnLoad').onclick = function () {
                for (var i = jsonData.length-1; i >=0; i--) {
                    var rowObj = tableObj.insertRow(1);
                    var cellObj1 = rowObj.insertCell(-1);
                    var num = i+1 < 9 ? '0' + (i+1) : i+1;
                    cellObj1.innerHTML = '<input type="checkbox"/>' + num;
                    for (var key in jsonData[i]) {                        
                        var cellObj = rowObj.insertCell(-1);
                        cellObj.innerHTML = jsonData[i][key];
                    }
                }
                tableObj.border = '1px';
            };
            document.getElementById('btnSetStyle').onclick = function () {
                var rows = document.getElementById('table1').rows;
                for (var i = 0; i < rows.length; i++) {
                    rows[i].onmouseover = function () {
                        this.style.backgroundColor = 'yellow';
                    };
                    rows[i].onmouseleave = function () {
                        this.style.backgroundColor = '';
                    };
                }
            };
        };
    </script>
</body>
</html>