第一天记录

记录第一天的学习

题目要求：

1.点击单元格的内容弹窗 promre 接收值将接收的值替换单元格的内容　　　　　　　　　　

　　　 2.点击单元格出现两个按钮加粗字体颜色标红

　　　　　《步骤》

　　　　　　（1）给点击的元素加属性为了区分的对象

　　　　　　（2）给按钮加点击事件

　　　　　　（3）找到元素修改样式

　　　　　3.再创建一行

　　　　　　《步骤》

　　　　（1）获取所有的 td 标签

　　　（2）循环 td 给每一个 td 加上 onclick 属性

《代码》

　　　　　/*给所有元素添加 onclick 事件*/

<html>
　　<head>
       <script  type="text/javascript">

　　　　function modTwo(){

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

　　　　　　for(var i = 0; i < tdArr.length;i++ ){

　　　　tdArr[i].setAttribute("onclick","modone(this)");

　　　　　　tdArr[i].style.cursor = "pointer";

　　　　　   }

　　       }
　　 </script>
    </head>       
</html>

　　　　《步骤》

　　　　　　　　1.给单元格添加点击事件

　　　　　　　　2.方法内逻辑弹窗接收客户的输入 >= 保存在一个变量里边

　　　　　　　　3.找到要修改内容的单元格，通过操作的内容把用户输入的值替换进去

<html>
    <head>
    <script type="text/javascript">
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");
    }
    </script>
    </head>
</html>

<html>
          <head>
          <script type="text/javascript">
    //加粗按钮
    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");
            }
        }
    }
          </script>
          </head>
</html>

<html>
         <head>
         <script type="text/javascript">
          //字体变红按钮
      function bh(){
          //td_obj是全局变量
          td_obj.style.color = "red";
              //按钮显示
             var div = document.getElementById("dd");
         div.style.display = "none";
     }     
          </script>
          </head>   
</html>

　　　　　　《步骤》

　　　　　　　　　　1.找到父元素（往这里面添加元素）

　　　　　　　　　　2.创建元素 tr td

　　　　　　　　　　　　（1）创建tr元素创建td元素

　　　　　　　　　　　　（2）把td元素放到tr元素里

　　　　　　　　　　3.把tr元素放到父元素里

<html>
    <head>
    <script type="text/javascript">
         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 = "李四";
    //            把td元素放到tr元素里面
            trObj.appendChild(tdObj);
        }

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

<html>
    <head>
    <script type="text/javascript">
    </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>