练习题。对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 >
<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>