DOM操作表格

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>添加用户</title>
    </head>
    <body>
        <center>
            <br><br>
            添加用户:<br><br>
            姓名: <input type="text" name="name" id="name" />&nbsp;&nbsp;
            email: <input type="text" name="email" id="email" />&nbsp;&nbsp;
            电话: <input type="text" name="tel" id="tel" /><br><br>
            <button id="addUser">提交</button>
            <br><br>
            <hr>
            <br><br>
            <table id="usertable" border="1" cellpadding="5" cellspacing=0>
                <tbody>
                    <tr>
                        <th>姓名</th>
                        <th>email</th>
                        <th>电话</th>
                        <th>&nbsp;</th>
                    </tr>
                    <tr>
                        <td>Tom</td>
                        <td>tom@tom.com</td>
                        <td>5000</td>
                        <td><a href="deleteEmp?id=Tom">Delete</a></td>
                    </tr>
                    <tr>
                        <td>Jerry</td>
                        <td>jerry@sohu.com</td>
                        <td>8000</td>
                        <td><a href="deleteEmp?id=Jerry">Delete</a></td>
                    </tr>
                </tbody>
            </table>
        </center>
    </body>
    <script language="JavaScript"> //dom结构绘制完毕,页面的所有关联的文件必须加载完毕(图片) window.οnlοad=function(){ //<button id="addUser">提交</button> document.getElementById("addUser").οnclick=function(){ /******************************************************************************************************/ //获取文本框的值 /* * 姓名: <input type="text" name="name" id="name" />&nbsp;&nbsp; email: <input type="text" name="email" id="email" />&nbsp;&nbsp; 电话: <input type="text" name="tel" id="tel" /><br><br> */ var nameValue=document.getElementById("name").value; var emailValue=document.getElementById("email").value; var telValue=document.getElementById("tel").value; /******************************************************************************************************/ //创建td /* * <tr> <td>Tom</td> <td>tom@tom.com</td> <td>5000</td> <td><a href="deleteEmp?id=Tom">Delete</a></td> </tr> */ //创建nametd var nameTd=document.createElement("td"); var nameText=document.createTextNode(nameValue); nameTd.appendChild(nameText); //创建emailtd var emailTd=document.createElement("td"); var emailText=document.createTextNode(emailValue); emailTd.appendChild(emailText); //创建teltd var telTd=document.createElement("td"); var telText=document.createTextNode(telValue); telTd.appendChild(telText); //创建atd var aTd=document.createElement("td"); var aElement=document.createElement("a"); aElement.setAttribute("href","deleteEmp?id="+nameValue); var deleteText=document.createTextNode("Delete"); aElement.appendChild(deleteText); aTd.appendChild(aElement); /******************************************************************************************************/ //创建tr var trElement=document.createElement("tr"); //增加td到tr上 trElement.appendChild(nameTd); trElement.appendChild(emailTd); trElement.appendChild(telTd); trElement.appendChild(aTd); /******************************************************************************************************/ //增加tr到table上 //<table id="usertable" border="1" cellpadding="5" cellspacing=0> //<tbody> var tableElement=document.getElementById("usertable"); //创建tbody,为了跨浏览器,要创建tbody var tbodyElement=document.createElement("tbody"); tbodyElement.appendChild(trElement); //放置tbody到table上 tableElement.appendChild(tbodyElement); /******************************************************************************************************/ //删除 aElement.οnclick=function(){ //使网页的链接失效 return delTr(aElement); } /******************************************************************************************************/ } } /** * @param {Object} aElement */ function delTr(aElement){ /* * <tr> <td> Tom </td> <td>tom@tom.com</td> <td>5000</td> <td><a href="deleteEmp?id=Tom">Delete</a></td> </tr> */ var name=aElement.parentNode.parentNode.firstChild.firstChild.nodeValue; //alert("name "+name) var flag=window.confirm("您真的要删除["+name+"]这个用户吗?"); //alert(flag); // 点击"取消" 按钮 if(!flag){ //使网页的链接失效 return false; } //删除 //获取tbody var tbodyElement=aElement.parentNode.parentNode.parentNode; //获取tr var trElement=aElement.parentNode.parentNode; //删除 tbodyElement.removeChild(trElement); //使网页的链接失效 return false; } </script>
</html>
全部评论

相关推荐

头像
昨天 08:26
山东大学 嵌入式软件工程师
【面试实战7】简历上要不要写主修课程、学生工作、自我评价
最近春招开始了，暑假实习也迫在眉睫，估摸着考研出成绩后，一大波本科应届生也要开始准备找工作，所以在简历的编写上，有些点还是得注意的，就比如我发现下面这仨栏目，好多人写的其实都不是很好：1，主修课程最近牛客上看到的不少简历，很明显的一个特点就是，本科生同学特别乐意写自己的主修课程，甚至还刷到了把C语言、C++、Python、Java、嵌入式都写上的（是不是自动化来着），我给主修课程做的总结其实是：只适用于考研保研面试简历。首先哈，假如你是考研保研面试，把自己本科期间分数较高的几门课，比如自动控制理论考了95，嵌入式考了90分，写上那么一行，一方面秀秀肌肉证明自己在学习成绩方面是很优秀的，另一方面...
投递牛客等公司10个岗位 > SAGIMA经验浅谈 牛客激励计划
点赞 评论 收藏
分享
头像
02-12 18:03
门头沟学院 嵌入式软件开发
点赞 评论 收藏
分享
02-16 09:00
中南大学 Java
点赞 评论 收藏
分享
今天 12:54
已编辑
长鑫存储_厨师
RE：从零开始的春招路（双非版）
早晨起床，身为底层双非的鼠鼠，开始焦虑秋招的事情，一边吃着早饭，一边点开牛客，看看大家的秋招动态。发现有人说offer很烂，本着同病相怜的心理，点进去看看，结果是神佬觉得今年开的80w&nbsp;offer比去年Base低了，内心一万点暴击。下一个帖子是希望大家帮忙改改简历的，鼠鼠想着自己简历可能也需要改一改，想进去学些一下技巧，放大一看，原来是酒吧舞✌，实习、比赛和项目看起来都很高级，回想一下自己可怜的实习经历和比赛证书，默默的扣了一个mark，然后点击退出，因为鼠鼠的泪水已经在眼眶里打转了。吃完早饭，鼠鼠去到实验室，准备开题和老师指派的杂活，收到一封之前海投的中厂实习offer，这是鼠鼠海投的800...
双非就业答疑小贴士 牛客激励计划 牛客创作赏金赛
点赞 评论 收藏
分享
评论
点赞
收藏
分享

全站热榜

更多

创作者周榜

更多
正在热议
更多
# 读研or工作，哪个性价比更高？ #
23518次浏览 320人参与
# 科大讯飞求职进展汇总 #
258728次浏览 2594人参与
# 秋招感动瞬间 #
10553次浏览 101人参与
# 如果重来一次你还会读研吗 #
154171次浏览 1690人参与
# 你最满意的offer薪资是哪家公司？ #
11624次浏览 109人参与
# 文科生还参加今年的春招吗 #
3164次浏览 27人参与
# 长光卫星求职进展汇总 #
27522次浏览 183人参与
# 选择和努力，哪个更重要？ #
41412次浏览 470人参与
# 打工人的工作餐日常 #
24626次浏览 221人参与
# 招聘要求与实际实习内容不符怎么办 #
39936次浏览 464人参与
# 机械人选offer，最看重什么？ #
68508次浏览 433人参与
# 机械人怎么评价今年的华为 #
180214次浏览 1484人参与
# 机械制造岗投递时间线 #
19279次浏览 324人参与
# 如果再来一次，你还会学硬件吗 #
102530次浏览 1231人参与
# 影石Insta360求职进展汇总 #
107432次浏览 963人参与
# 如果公司降薪，你会跳槽吗？ #
44290次浏览 347人参与
# 机械制造公司评价 #
98382次浏览 286人参与
# 跳槽时有那些注意事项 #
72695次浏览 489人参与
# 追觅科技求职进展汇总 #
8466次浏览 57人参与
# 我的工作日记 #
53060次浏览 766人参与
牛客网
牛客企业服务