【练习】javascript DOM表格内元素属性样式添加

DOM的操作实际就是document的操作，想要操作谁就先找到谁

 这是一个表格的练习，点击表格改内容，用按钮控制内样的样式，添加表格元素

<script>
    var on;　　   /定义一个全局变量
    function one(){ 
        var tdd = document.getElementsByTagName("td");
        for(var i = 0 ; i < tdd.length ; i++){
            tdd[i].setAttribute("onClick","mod(this)");　　//　　给每一个td表格添加一个点击事件也就是添加一个属性，调用函数写在body最后，页面加载后调用
        }
    }
    function mod(obj){
        obj.innerHTML = prompt("内容");　　　　　　　　　　//obj是点击按钮mod（this）的函数名，这里就代表的点击的那个表格，表格要修改的内容（innerHTML）是：用prpmpt输入框输入
        var ddd = document.getElementById("d");
        ddd.style.display = "block";　　　　　　　　　　　//点击表格的同时，将none的div样式改变成block，重新显示出来
        on= obj;　　　　　　　　//全局变量在这里起作用，点击哪个表格就赋值给on，这样on就代表了被点击的表格
　　　　//obj.setAttribute("aaa","aaa")
    }
    function cu(){
        on.style.fontWeight = "bold"　　　　　　　　　　　　　　　　
        /*
        var tdd = document.getElementsByTagName("td");　　　　　//变红和变粗两按钮控制点击的内容的样式，on在上面点击的时候已经被赋值，这里代表被点击的那个
　　　　　　　for(var i = 0 ; i < tdd.length ; i++){
            var z = tdd[i].getAttribute("ooo");
            if(z == "ooo"){
                tdd[i].style.fontWeight = "bold";　　　　　/绿色为第二种方式，在点击事件的时候，给点击的内容增加一个属性，任意定义一个属性和属性值
                tdd[i].removeAttribute("ooo")　　　　　　　　然后，通过for循环提取全部td的“ooo”，如果有，肯定是上面点击时定义了，所有给他添加样式
        }*/
    }
    function hong(){
        on.style.color = "red";
        }

    function add(){
        var tr= document.createElement("tr");
        var tabb = document.getElementById("ta");　　　　　//　创建一个tr元素，添加到table元素里面
        tabb.appendChild(tr);　　　　　　　　　　　　　　　　　　　用循环创建td元素添加到tr，实现添加四个表格
        for(var i = 0 ; i < 4 ; i++){
            var td =document.createElement("td");
            td.innerHTML = "空 ";
            tr.appendChild(td);
        }
    }
</script>
</head>

<body>
<table border="1px" width="80%" cellpadding="0" id="ta">
    <tr>
        <td >姓名</td>
        <td >年龄</td>
        <td >性别</td>
        <td >班级</td>
    </tr>
    <tr>
        <td >李一</td>
        <td >10</td>
        <td >女</td>
        <td >一</td>
    </tr>
    
</table>
<div id="d" class="dd" style="display: none">
    <button onClick="cu()">加粗</button>
    <button onClick="hong()">标红</button>
    <button onClick="add()">加行</button>
    
</div>
<script>one();</script>      //调用，写在最后
</body>
</html>

 

posted @ 2017-10-17 11:37  沃泽法克  阅读(609)  评论(0)    收藏  举报