对表格的操作

最新推荐文章于 2024-05-24 23:45:01 发布

aozhang1070

最新推荐文章于 2024-05-24 23:45:01 发布

阅读量64

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/loveMis/p/8337778.html

版权

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript" src="js/index.js"></script>
</head>

<body>
    <center>
        <table id="tab">
            <tr>
                <th width="25%">年级</th>
                <th width="25%">性别</th>
                <th width="25%">姓名</th>
                <th width="25%">操作</th>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td>
                <button>编辑</button>
                <button>删除</button>
                </td>
            </tr>
        </table>
        <button id="but">添加</button>
    </center>
</body>
</html>

var but=null;    //添加按钮
var tab=null;    //表格
var n=0;        //行标志
var dd = null;    //定义一个变量 存所有的td
var thLength = 0;//thLength是th标签的个数

window.onload = function(){
    //初始化
    tabInit();
    //添加行
    addRows();
}

/*
功能：初始化按钮和表格对象
参数：
返回值：
*/
function tabInit(){
    //添加按钮  点击调用addRows方法添加一行
    but=document.getElementById("but");
    but.addEventListener("click",addRows);
    
    //表格  用来追加行的
    tab=document.getElementById("tab");
    //添加表格的属性  宽度  边框 点击事件
    tab.setAttribute("width","50%");
    tab.setAttribute("border","1");
    
    thLength = document.getElementsByTagName("th").length;
}

/*
功能：创建tr  td  放到表格里面
参数：
返回值：
*/
function addRows(){
    n++;//做标记删除按钮和行的关联标记
    //创建tr 一会放到表格
    var trdom=document.createElement("tr");
    var tddom="";//创建td  一会放到tr里面
    var czdom="";//创建删除按钮  一会放到一行最后一个td
    //thLength是th标签的个数
    for(var i=0;i < thLength;i++){
        tddom=document.createElement("td");
        //最后一个单元格里面有一个删除按钮
        if(i == thLength-1){
            czdom=document.createElement("button");//给最后一个单元格加一个按钮
            czdom.innerHTML="删除";//给添加的按钮附一个值“删除”
            //添加标识  和行相关联 64行
            czdom.setAttribute("flag",n);
            //点击事件
            czdom.addEventListener("click",del);
            //将按钮放到td里面
            tddom.appendChild(czdom);
            //设置居中 同时用来判断是否添加单元格事件
            tddom.style.textAlign="center";
        }
        //将td 放到 tr 里面
        trdom.appendChild(tddom);
    }
    //设置tr的属性和这一行的删除按钮相关联 52行
    trdom.setAttribute("flag",n);
    //将ttr放到 tab里面
    tab.appendChild(trdom);

//    ****************** 
//    给每个单元格添加事件 
//    ******************
    //获取所有的td，重新获取，因为已经对单元格进行了操作，td的数量已经发生改变
    dd = document.getElementsByTagName("td"); 
    //给所有的td加上点击事件
    for(var j=0;j<dd.length;j++){
        dd[j].addEventListener("click",addclick); 
    }
}

/*
功能：td点击事件，将内容提换为文本框
参数：
返回值：
*/
function addclick(){
    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">';//onBlur失去焦点
//    设置当前操作的td属性 
//    文本框失去焦点将文本框的值给td 
//    为了定位到正在操作的td
    tdObj.setAttribute("selTd","sel");

    //删除事件 防止和文本框冲突
    for(var l=0;l<dd.length;l++){
        dd[l].removeEventListener('click',addclick); 
    }
}
/*
功能：文本框失去焦点 文本框消失
参数：  文本框对象
返回值：
*/

function xiaoshi(obj){//obj就是xiaoshi里面的this，也就是被点击的那个对象
    //获取到文本框的内容
    var val = obj.value;
    //将这个文本框删除 td清空
    obj.remove();

    //将文本框的内容给td  找到所有td
    dd = document.getElementsByTagName("td"); 
    for(var i = 0; i<dd.length;i++){
        //通过selTd 属性判断当前正在操作的td
        if(dd[i].getAttribute("selTd") == "sel"){
//            将文本框的内容给td
            dd[i].innerHTML = val;
//            将 属性selTd 删除  保证唯一性
            dd[i].removeAttribute("selTd");
        }
    }
    
    //给所有的td加上点击事件
    for(var j=0;j<dd.length;j++){
        dd[j].addEventListener("click",addclick); 
    }
}


/*
功能：点击删除将本行删除
参数：
返回值：
*/
function del(){  //
    var btnObj = this;//btnObj是删除按钮 对象btnObj——this--del--czdom--删除按钮
    var num=btnObj.getAttribute("flag");
    var trarr=document.getElementsByTagName("tr");
    for(var a in trarr){
        if(trarr[a].getAttribute("flag") == num){
            trarr[a].remove();
            break;//将for循环停止，因为如果对trarr数组进行了操作，再进行循环程序会报错
        }
    }
}

转载于:https://www.cnblogs.com/loveMis/p/8337778.html

aozhang1070

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
对表格的操作

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><script type="text/javascript" src="js/index.js"></script></h...
复制链接

扫一扫