【JavaScript】DOM增删改练习

简介: DOM增删改练习

9e8db0ac3db34a658fbf86fce86b8343.gif

删除函数

var del = function(){
     var tr = this.parentNode.parentNode;
     var name = tr.getElementsByTagName("td")[0].innerHTML;
     if(confirm("确定删除"+name+"吗?")){
         tr.parentNode.removeChild(tr);
     }                   
     return false;
     }

单击删除事件

     var a_list = document.getElementsByTagName("a");
     for(var i = 0; i<a_list.length; i++){
         a_list[i].onclick =  del;
         };

添加信息

 document.getElementById('sub').onclick = function(){
     //查找姓名
      var name = document.getElementById('addname').value;
      //邮箱
      var email = document.getElementById('addemail').value;
      //联系方法
      var tel = document.getElementById('addtel').value;
      //创建一个tr
      var tr = document.createElement("tr");
      tr.innerHTML = "<td>"+name+"</td>"+
                      "<td>"+email+"</td>"+
                      "<td>"+tel+"</td>"+
                      "<td><a href=''>删除信息</a></td>";
      var a = tr.getElementsByTagName("a")[0];
      a.onclick = del;
      //找到tbody
      var tbody = document.getElementsByTagName("tbody")[0];
      //将tr放在tbody内
      tbody.appendChild(tr);
  }

css代码

        div{
            margin-top: 20px;
        }
        #sub{
             margin-left: 100px;
        }

html代码

 <div>
    <table border="1px" id="tab1">
        <tr>
            <th>姓名</th>
            <th>邮箱</th>
            <th>联系方式</th>
            <th>&nbsp;</th>
        </tr>
        <tr>
            <td>苏凉</td>
            <td>123@qq.com</td>
            <td>123</td>
            <td><a href="">删除信息</a></td>
        </tr>
        <tr>
            <td>suliang</td>
            <td>4253@qq.com</td>
            <td>4253</td>
            <td><a href="">删除信息</a></td>
        </tr>
    </table>
    </div>
    <div>
    <table border="1px" id="tab2">
        <tr>
            <th colspan="2" >添加信息</th>
        </tr>
        <tr>
            <td>姓名:</td>
            <td><input type="text" id="addname" name="name"></td>
        </tr>
        <tr>
            <td>邮箱:</td>
            <td><input type="text" id="addemail" name="email"></td>
        </tr>
        <tr>
            <td>联系方式:</td>
            <td><input type="text" id="addtel" name="tel"></td>
        </tr>
        <tr>
            <td colspan="2"><input type="submit" id="sub"></td>
        </tr>
    </table>
    </div>

全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //删除
        var del = function(){
                    var tr = this.parentNode.parentNode;
                    var name = tr.getElementsByTagName("td")[0].innerHTML;
                    if(confirm("确定删除"+name+"吗?")){
                        tr.parentNode.removeChild(tr);
                    }                   
                    return false;
                    }
        window.onload = function(){
            var a_list = document.getElementsByTagName("a");
            for(var i = 0; i<a_list.length; i++){
                a_list[i].onclick =  del;
                };
            document.getElementById('sub').onclick = function(){
                //查找姓名
                var name = document.getElementById('addname').value;
                //邮箱
                var email = document.getElementById('addemail').value;
                //联系方法
                var tel = document.getElementById('addtel').value;
                //创建一个tr
                var tr = document.createElement("tr");
                tr.innerHTML = "<td>"+name+"</td>"+
                                "<td>"+email+"</td>"+
                                "<td>"+tel+"</td>"+
                                "<td><a href=''>删除信息</a></td>";
                var a = tr.getElementsByTagName("a")[0];
                a.onclick = del;
                //找到tbody
                var tbody = document.getElementsByTagName("tbody")[0];
                //将tr放在tbody内
                tbody.appendChild(tr);
            }
        }
    </script>
    <style>
        div{
            margin-top: 20px;
        }
        #sub{
             margin-left: 100px;
        }
    </style>
</head>
<body>
    <div>
    <table border="1px" id="tab1">
        <tr>
            <th>姓名</th>
            <th>邮箱</th>
            <th>联系方式</th>
            <th>&nbsp;</th>
        </tr>
        <tr>
            <td>苏凉</td>
            <td>123@qq.com</td>
            <td>123</td>
            <td><a href="">删除信息</a></td>
        </tr>
        <tr>
            <td>suliang</td>
            <td>4253@qq.com</td>
            <td>4253</td>
            <td><a href="">删除信息</a></td>
        </tr>
    </table>
    </div>
    <div>
    <table border="1px" id="tab2">
        <tr>
            <th colspan="2" >添加信息</th>
        </tr>
        <tr>
            <td>姓名:</td>
            <td><input type="text" id="addname" name="name"></td>
        </tr>
        <tr>
            <td>邮箱:</td>
            <td><input type="text" id="addemail" name="email"></td>
        </tr>
        <tr>
            <td>联系方式:</td>
            <td><input type="text" id="addtel" name="tel"></td>
        </tr>
        <tr>
            <td colspan="2"><input type="submit" id="sub"></td>
        </tr>
    </table>
    </div>
</body>
</html>


相关文章
|
3天前
|
JavaScript 前端开发 安全
【JavaScript 】DOM操作快速入门
【JavaScript 】DOM操作快速入门
6 2
|
4天前
|
JavaScript 前端开发 UED
JavaScript基础-DOM操作:查找、创建、修改
【6月更文挑战第12天】本文介绍了DOM基础,包括查找元素(getElementById、getElementsByClassName等)、创建新节点(createElement、createTextNode)和修改节点(innerText、innerHTML、setAttribute等)。强调了易错点,如ID唯一性、性能考量和安全问题,并提供了代码示例。熟练掌握DOM操作对前端开发至关重要,但应注意性能优化,适时使用框架或库。
JavaScript基础-DOM操作:查找、创建、修改
|
9天前
|
前端开发 JavaScript 搜索推荐
[初学者必看]JavaScript 15题简单小例子练习,锻炼代码逻辑思维
【6月更文挑战第3天】这是一个JavaScript编程练习集,包含15个题目及答案:计算两数之和、判断偶数、找数组最大值、字符串反转、回文检测、斐波那契数列、数组去重、冒泡排序、阶乘计算、数组元素检查、数组求和、字符计数、数组最值和质数判断以及数组扁平化。每个题目都有相应的代码实现示例。
11 1
|
10天前
|
存储 前端开发 JavaScript
[初学者必看]JavaScript 简单实际案例练习,锻炼代码逻辑思维
【6月更文挑战第2天】这是一个前端小项目合集,包括图片轮播器、动态列表、模态框、表单验证等14个项目,旨在帮助初学者提升编码技能和实战经验。每个项目提供关键提示,如使用HTML、CSS和JavaScript实现不同功能,如事件监听、动画效果和数据处理。通过这些项目,学习者可以锻炼前端基础并增强实际操作能力。
14 2
|
22天前
|
XML JavaScript 前端开发
JavaScript简介&引入方式(JavaScript基础语法、JavaScript对象、BOM、DOM、事件监听)
JavaScript简介&引入方式(JavaScript基础语法、JavaScript对象、BOM、DOM、事件监听)
16 2
|
23天前
|
JavaScript Java
JavaSE精选-JS&DOM
JavaSE精选-JS&DOM
20 1
|
23天前
|
JavaScript Java
JS&DOM技术文章
JS&DOM技术文章
|
24天前
|
前端开发 JavaScript
HTML DOM如何通过JavaScript动态改变元素的CSS样式?
【5月更文挑战第23天】HTML DOM如何通过JavaScript动态改变元素的CSS样式?
28 1
|
1月前
|
JavaScript 前端开发
JavaScript 提供了多种方法来操作 DOM(文档对象模型)
【5月更文挑战第11天】JavaScript 用于DOM操作的方法包括获取元素(getElementById, getElementsByClassName等)、修改内容(innerHTML, innerText, textContent)、改变属性、添加/删除元素(appendChild, removeChild)和调整样式。此外,addEventListener用于监听事件。注意要考虑兼容性和性能当使用这些技术。
20 2
|
1月前
|
JavaScript 前端开发 安全
javascript操作DOM的方法
javascript操作DOM的方法
16 0