js对table执行增-删-改

来源：互联网发布：php define const 区别编辑：程序博客网时间：2024/05/17 16:44
<html><head><title>作业</title><script language="javascript" type="text/javascript">        /*页面加载完成*/    window.onload = function(){        var etable = "<table border = '1' id='myTable'>"+                        "<tr align = 'center'> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>爱好</th> <th>操作</th></tr>"+                        "<tr> <td onclick='updStu(this)' name='付政委'>付政委</td>"+                        " <td onclick='updStu(this)' name='男'>男</td>"+                        " <td onclick='updStu(this)' name='24'>24</td>"+                        " <td onclick='updStu(this)' name='编程、看电影'>编程、看电影</td> "+                        "<td><span onclick='delStu(this)' style='cursor:pointer; color=red'>删除</span>"+                        "</td></tr>"+                                             "</table><hr/>"+                     "增加新用户<br/>"+                     "姓名：<input type='text' id='stuName'/><br/>"+                     "性别：<lable><input type='radio' id='stuSex' name='stuSex' value='男' checked = 'checked'/>男</lable>"+                     "      <lable><input type='radio' id='stuSex' name='stuSex' value='女'/>女</lable><br/>"+                     "年龄：<select id='stuAge'>"+                     "      </select><br/>"+                     "爱好：<label><input type='checkbox' value='野游' name='stuhobby' id='stuhobby'>野游</label> "+                     "      <label><input type='checkbox' value='逛街' name='stuhobb' id='stuhobby'>逛街</label>"+                     "      <label><input type='checkbox' value='交友' name='stuhobby' id='stuhobby'>交友</label>"+                     "      <label><input type='checkbox' value='其他' name='stuhobby' id='stuhobby'>其他</label><hr/>"+                     "<input type='button' value='新增用户' id='addStu'/>"                     ;        document.body.innerHTML = etable;                        /*向年龄中插入元素*/        for(var i = 10; i<=100; i++){            var eOption = document.createElement("option");            eOption.value = i;            eOption.text = i+"岁";            $("stuAge").add(eOption);        }                /*提取用户信息，并增加到列表*/        $("addStu").onclick = function(){                                 /*提取用户名*/             var stu_name = $("stuName").value;                          /*提取性别*/             var stu_sexs = document.getElementsByName("stuSex"),stu_sex = "";             for(var sid = 0,slen= stu_sexs.length; sid < slen; sid ++){                if(stu_sexs[sid].checked){                    stu_sex = stu_sexs[sid].value;                }             }                          /*获得年龄*/             var stu_age = $("stuAge");             stu_age = stu_age.options[stu_age.selectedIndex].value;                         /*获得爱好*/             var stu_hobbys = document.getElementsByName("stuhobby"),stu_hobby="";                                         for(var shid = 0,shlen = stu_hobbys.length; shid < shlen; shid ++){                    if(stu_hobbys[shid].checked){                        stu_hobby += stu_hobbys[shid].value +"、";                    }             }                        /*把信息写入表格*/            var trow = $("myTable").insertRow($("myTable").rows.length);            //根据当前插入到的长度，改变表格背景色            if(($("myTable").rows.length)%2==1){                trow.style.backgroundColor="pink";            }                        var tcell_0 = trow.insertCell(0);            var tcell_1 = trow.insertCell(1);            var tcell_2 = trow.insertCell(2);            var tcell_3 = trow.insertCell(3);            var tcell_4 = trow.insertCell(4);                    tcell_0.innerHTML = stu_name;            tcell_1.innerHTML = stu_sex;            tcell_2.innerHTML = stu_age;            tcell_3.innerHTML = stu_hobby;            tcell_4.innerHTML = "<span onclick='delStu(this)' style='cursor:pointer; color=red'>删除</span>";                        /*添加事件*/            tcell_0.name = stu_name;            tcell_0.onclick = updateUser;                       tcell_1.name = stu_sex;            tcell_1.onclick = updateUser;                       tcell_2.name = stu_age;            tcell_2.onclick = updateUser;                        tcell_3.name = stu_hobby;            tcell_3.onclick = updateUser;                         /*定义事件*/            function updateUser(){                var userName = "";                userName = this.name;                                this.innerHTML = "<input type='text' id='updF'/>";                $("updF").focus();                  $("updF").value = userName;                $("updF").onmousedown = function(){                                    if($("updF").value.length > 0){                         this.parentNode.innerHTML = $("updF").value;                    }else{                         this.parentNode.innerHTML = userName;                    }                                   }                            }        }    }   /*修改表格信息*/    function updStu(obj){        var userName = "";        userName = obj.name;        obj.innerHTML = "<input type='text' id='updF'/>";        $("updF").focus();          $("updF").value = userName;        $("updF").onmousedown = function(){            if($("updF").value.length > 0){                obj.innerHTML = $("updF").value;            }else{                obj.innerHTML = userName;            }                    }    }        /*删除控制*/    function delStu(obj){        /*删除提示框*/        var pddel = window.confirm("确定删除？");        if(pddel){            var tr=obj.parentNode.parentNode;            var tbody = tr.parentNode;            tbody.removeChild(tr);        }    }    /*刀了符号，用于调用获得dom*/    function $(eid){        return document.getElementById(eid);    }</script></head><body></body></html>