周末作业

点击天加按钮添加表格，点击添加的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，可以添加内容，但是再新创建一个表格，点击新创建的之后输入的内容消失。