使用javascript实现对表格数据的动态增加和删除

学习javascript DOM对象的一个小练习_使用javascript进行对表格数据简单的添加和删除操作

首先先使用HTML写一个添加数据使用的表单,让它再浏览器窗口居中显示。

<form  action="#" method="get" align="center" >
    <input type="text" id="id" name="id" placeholder="请输入学号">
    <input type="text" id="name" name="name" placeholder="请输入姓名">
    <input type="text" id="gender" name="gender" placeholder="请输入性别">
    <input type="button" id="add" value="添加">
</form>

使用HTML写一个<table>标签,用于将表单中提交的内容显示到表格中,同时也将表格居中

<table align="center">
    <caption>学生信息表</caption>
    <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>
    <tr>
    <td>1</td>
    <td>蛋蛋</td>
    <td>男</td>
    <td><a href="javascript:void(0);" onclick="delTr(this);" >删除</a> </td>
    </tr>
</table>

用CSS简单的将表格增加边框和改变一下表格的宽度和表格与表单的外边距

<style>
    table{
        margin-top: 100px;
        border: 1px solid black;
    }
    th{
        border: 1px solid black;
        width:120px;
    }
    td{
        border: 1px solid black;
        width:120px;
    }
</style>

接下来我们先实现添加表格数据的操作,需要实现将表单提交的数据显示到表格中,先来说一下思路:(这里使用的是Node节点的方法,面向对象的思想,其实使用innerHTML更简单,但是不面向对象)

               1. 给添加按钮绑定单击事件
                2. 获取表单中提交的数据
                3. 创建td,设置td的文本为表单中文本框的内容。(document.createTextNode
                4. 创建tr,将td添加到tr中
                5. 获取table,将tr添加到table中

 var add = document.getElementById("add");
    add.onclick = function (newChild) {
        //获取表单中的数据
        var id = document.getElementById("id").value;
        var name = document.getElementById("name").value;
        var gender = document.getElementById("gender").value;
        //创建td对象
        var td_id = document.createElement("td");
        var text_id = document.createTextNode(id);
        td_id.appendChild(text_id);

        var td_name = document.createElement("td");
        var text_name = document.createTextNode(name);
        td_name.appendChild(text_name);

        var td_gender = document.createElement("td");
        var text_gender = document.createTextNode(gender);
        td_gender.appendChild(text_gender);

        var td_a = document.createElement("td");
        var ele_a = document.createElement("a");
        ele_a.setAttribute("href","javascript:void(0);");
        ele_a.setAttribute("onclick","delTr(this);");
        var text_del = document.createTextNode("删除");
        ele_a.appendChild(text_del);
        td_a.appendChild(ele_a);

        //创建tr元素对象
        var tr = document.createElement("tr");
        tr.appendChild(td_id);
        tr.appendChild(td_name);
        tr.appendChild(td_gender);
        tr.appendChild(td_a);

        //获取table元素对象
        var table = document.getElementsByTagName("table")[0];
        table.appendChild(tr)

    }

最后实现删除表格中数据的操作

确定点击的是哪一个超链接,然后通过父节点删除子节点,再添加的方法中,我们需要为每个<a>标签添加属性<a href="javascript:void(0);" οnclick="delTr(this);" >删除</a>

然后绑定删除的单击事件,使用parentNode方法获取父级标签<td>,再获取父级标签<tr>,再再获取父级标签<table>,

通过删除子节点的方法removeChild删除table下的tr标签

    //定义一个删除的方法
    function delTr(obj){
        var table = obj.parentNode.parentNode.parentNode;
        var tr = obj.parentNode.parentNode;
        table.removeChild(tr);
    }
刚开始学前端,也是第一次发博客嘿嘿...
展开阅读全文
©️2020 CSDN 皮肤主题: 1024 设计师: 上身试试 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值