JSDom测试

最新推荐文章于 2024-05-08 16:19:44 发布

一只极度渴望成长的Giser

最新推荐文章于 2024-05-08 16:19:44 发布

阅读量308

点赞数

分类专栏： Javascript、JQuery练习文章标签： JSDom测试

本文链接：https://blog.csdn.net/qq_32077521/article/details/99638871

版权

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

69 篇文章 1 订阅

订阅专栏

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

一只极度渴望成长的Giser

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JSDom测试

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" /></head>...
复制链接

扫一扫

专栏目录