zoukankan      html  css  js  c++  java
  • 周末作业

    点击天加按钮添加表格,点击添加的td给td添加input,输入内容赋给td

        <center>
            <table id="tab">
                <tr>
                    <th width="25%">年级</th>
                    <th width="25%">性别</th>
                    <th width="25%">姓名</th>
                    <th width="25%">操作</th>
                </tr>
    
            </table>
            <button id="but">添加</button>
        </center>
    var but=null;    //添加按钮
    var tab=null;    //表格
    var n=0;        //行标志
    var dd = null;    //定义一个变量 存所有的td
    
    window.onload = function(){
        //初始化
        tabInit();
        //添加行
        addRows();
    }
    function tabInit(){
        //添加按钮
        but=document.getElementById("but");
        //表格
        tab=document.getElementById("tab");
        //添加表格的属性  宽度  边框 点击事件
        tab.setAttribute("width","50%");
        tab.setAttribute("border","1");
        but.addEventListener("click",addRows);
    }
    
    /*
    功能:创建tr  td  放到表格里面
    参数:
    返回值:
    */
    function addRows(){
        n++;
        var trdom=document.createElement("tr");
        var tddom="";
        var czdom="";
        for(var i=0;i<4;i++){
            tddom=document.createElement("td");
            //最后一个单元格里面有一个删除按钮
            if(i==3){
                czdom=document.createElement("button");
                czdom.innerHTML="删除";
                //添加标识  和点击事件
                czdom.setAttribute("flage",n);
                czdom.addEventListener("click",del);
                tddom.appendChild(czdom);
    
                tddom.style.textAlign="center";
            }
            trdom.appendChild(tddom);
        }
        trdom.setAttribute("flage",n);
    
        tab.appendChild(trdom);
    
        //获取所有的td
        dd = document.getElementsByTagName("td"); 
        //给所有的td加上点击事件
        for(var j=0;j<dd.length;j++){
            dd[j].addEventListener("click",addclick); 
        }
    }
    
    /*
    功能:td点击事件,将内容提换为文本框
    参数:
    返回值:
    */
    function addclick(evt){
        var tdObj = this;//被点击的那个td对象
        var tdStr = "";//用来存td里面的内容
        //判断是最后一个td就结束方法
        if(tdObj.style.textAlign != ""){
            return;
        }
    
        //获取td里面的内容  将内容给文本框
        tdStr = tdObj.innerHTML;
        tdObj.innerHTML = '<input type="text" value="'+tdStr+'" onBlur="xiaoshi(this)"  style="border: none">';
        tdObj.setAttribute("selTd","sel");
    
        //删除事件
        //dd.removeEventListener('click',addclick);   
        for(var l=0;l<dd.length;l++){
            dd[l].removeEventListener('click',addclick); 
        }
    }
    
    /*
    功能:文本框失去焦点 文本框消失
    参数:  文本框对象
    返回值:
    */
    
    function xiaoshi(obj){
        //定义一个属性值
        var val = obj.value;
        //属性对象消失
        obj.remove();
    
        //将文本框的内容给td
        dd = document.getElementsByTagName("td"); 
        for(var i = 0; i<dd.length;i++){
            if(dd[i].getAttribute("selTd") == "sel"){
                dd[i].innerHTML = val;
                dd[i].removeAttribute("selTd");
            }
        }
        
        //给所有的td加上点击事件
        for(var j=0;j<dd.length;j++){
            dd[j].addEventListener("click",addclick); 
        }
    }
    
    
    /*
    功能:点击删除将本行删除
    
    */
    function del(){  //
        var btnObj = this;//btnObj是删除按钮 对象
        var num=btnObj.getAttribute("flage");
        var trarr=document.getElementsByTagName("tr");
        for(var a in trarr){
            if(trarr[a].getAttribute("flage") == num){
                trarr[a].remove();
            }
        }
    }

    这个作业我做的时候,点击添加的td,可以添加内容,但是再新创建一个表格,点击新创建的之后输入的内容消失。

  • 相关阅读:
    (转+原)python中的浅拷贝和深拷贝
    (原)torch7中添加新的层
    (原+转)ubuntu终端输出彩色文字
    (原)torch中显示nn.Sequential()网络的详细情况
    (原)python中使用plt.show()时显示图像
    eclipse 注释模板
    leetcode 11 最大盛水容器
    leetcode 9 回文数字
    leetcode8 字符串转整数
    利用Intent启动activity的例子
  • 原文地址:https://www.cnblogs.com/chenyang-1/p/8331066.html
Copyright © 2011-2022 走看看