js增加删除table信息

最新推荐文章于 2022-09-26 13:19:48 发布

小傅哥

最新推荐文章于 2022-09-26 13:19:48 发布

阅读量1.5k

点赞数 1

文章标签： table function javascript input button border

本文链接：https://blog.csdn.net/generalfu/article/details/7892712

版权

Js 同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

Html

23 篇文章 1 订阅

订阅专栏

<html>

<head>

<title>作业</title>
<script language="javascript" type="text/javascript">
    
    window.onload = function(){
        var etable = "<table border = '1' id='myTable'>"+
                        "<tr align = 'center'> <td>姓名</td> <td>性别</td> <td>年龄</td> <td>爱好</td> <td>操作</td></tr>"+
                        "<tr> <td>付政委</td> <td>男</td> <td>24</td> <td>编程、看电影</td> "+
                        "<td><span οnclick='delStu(this)' style='cursor:pointer; color=blue'>删除</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);
            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 οnclick='delStu(this)' style='cursor:pointer; color=blue'>删除</span>";
          
        }

    }
    /*删除控制*/
    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>