练习题。对DOM中document的深刻理解巩固

//window.onload = modTwo;
 
    1、点击单元格内容  弹窗promrt接收值   将接受的值提换单元格内容
    2、点击单元格  出现2个按钮 加粗 字体颜色标红
        1、给点击的元素加属性  为了区分加粗的对象
        2、给按钮加点击事件
        3、找到元素，修改样式
    3、创建一行
   
    1、获取所有的td标签
    2、循环td   给每一个替代加上onclick属性
    给所有元素加onclick事件
    function modTwo(){

var tdArr = document.getElementsByTagName("td");

for(var i = 0; i<tdArr.length;i++){
    tdArr[i].setAttribute("onclick","modone(this)");
            tdArr[i].style.cursor = "pointer";
        }
    }
    
    
    
  
    1、给单元格添加点击事件
    2、方法内逻辑，弹窗接收用户的输入。=>保存在一个变量里面
    3、找到要修改内容的单元格，通过操作内容把用户输入的值提换进去
   
    var td_obj;
    //td的点击事件
    function modone(obj){
        td_obj = obj;
        //修改值
        obj.innerHTML = prompt("输入要修改的值");
        //按钮显示
        var div = document.getElementById("dd");
        div.style.display = "block";

//给本标签添加自定义属性
        obj.setAttribute("abc","abc");
    }
    
    
    //加粗按钮
    function jc(){
        //找到所有td
        var tdArr = document.getElementsByTagName("td");
        
        for(var i = 0; i<tdArr.length;i++){
            //找元素
            var a = tdArr[i].getAttribute("abc");
            if(a == "abc"){
                tdArr[i].style.fontWeight = "bold";
                tdArr[i].removeAttribute("abc");
            }
        }
    }
    //字体变红按钮
    function bh(){
        //td_obj是全局变量
        td_obj.style.color = "red";
        //按钮显示
        var div = document.getElementById("dd");
        div.style.display = "none";
    }

/*
    添加一行
    1、找到父元素（往这里面添加元素）
    2、创建元素 tr  td
        创建td元素  创建tr元素
        把td元素放到tr元素里面
    3、把tr放到父元素
    */
    function addcol(){
//        1、找到父元素（往这里面添加元素）
        var tableObj = document.getElementById("tab");
    
//        2、创建元素 tr  td创建td元素  创建tr元素
        var trObj = document.createElement("tr");
        
        
        for(var i = 0; i<4;i++){
            var tdObj = document.createElement("td");
            tdObj.innerHTML = prompt("请输入需要的值");
    //            把td元素放到tr元素里面
            trObj.appendChild(tdObj);
        }

//        3、把tr放到父元素
        tableObj.appendChild(trObj);
        
        var div = document.getElementById("dd");

}

</script>
</head>

<body ><!-- onLoad="modTwo()" -->
<button onClick="addcol()">添加一行</button>
<table id="tab" border="1" width="80%" cellpadding="0" cellspacing="0">
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>班级</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>男</td>
        <td>15</td>
        <td>101</td>
    </tr>

</table>

<div id="dd" style="">
    <button onClick="jc()">加粗</button>
    <button onClick="bh()">红色字体</button>
</div>

</body>
</html>
<script>modTwo()</script>