HTML + CSS + JavaScript 实现简单的动态表格

要求

添加一个学生信息表格，表格的信息有编号、姓名、性别三个字段，可以随意向表格中添加学生信息、删除学生信息。

步骤分析

  1. 定义可以向表格中添加信息的文本框和一个添加按钮
  2. 定义一个表格
  3. 给添加按钮绑定点击事件
  4. 获取文本框的内容
  5. 创建单元格，设置单元格的内容为文本框内容
  6. 创建表格行
  7. 将单元格添加到表格行中
  8. 获取表格对象，将表格行添加到表格中去
  9. 定义删除信息的方法

步骤实现

  1. 定义三个文本框 + 一个添加按钮

    <div>
    <input type="text" id="id" placeholder="请输入编号">
    <input type="text" id="name"  placeholder="请输入姓名">
    <input type="text" id="gender"  placeholder="请输入性别">
    <input type="button" value="添加" id="btn_add">
</div>

    效果如下：
    img

  2. 使用CSS，对div标签进行描述：将三个文本框和一个按钮，中心对齐，边沿长度为50个像素点

    div{
    text-align: center;
    margin: 50px;
}

    效果如下：
    img

  3. 定义一个表格

    <table>
    <!-- 表格标题 -->
    <caption>学生信息表</caption>
    <!-- 表格第一行：表格表头 -->
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>

    <!-- 表格第二行：学生信息2 -->
    <tr>
        <td>1</td>
        <td>令狐冲</td>
        <td>男</td>
        <!-- 在该单元格中创建一个链接标签，void运算符来阻止href返回值，通过onclick事件(鼠标点击)属性来删除信息行-->
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>

    <!-- 表格第三行：学生信息2 -->
    <tr>
        <td>2</td>
        <td>任我行</td>
        <td>男</td>
        <!-- 在该单元格中创建一个链接标签，void运算符来阻止href返回值，通过onclick事件(鼠标点击)属性来删除信息行-->
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>

    <!-- 表格第四行：学生信息3 -->
    <tr>
        <td>3</td>
        <td>岳不群</td>
        <td>?</td>
        <!-- 在该单元格中创建一个链接标签，void运算符来阻止href返回值，通过onclick事件(鼠标点击)属性来删除信息行-->
        <td><a href="javascript:void(0);" onclick="delTr(this);" >删除</a></td>
    </tr>
</table>

    效果如下：
    img

  4. 通过CSS，对表格进行描述：表格居中，为表格创建一个方框（方框宽度为500px），方框自动向中对齐三个文本框和一个按钮

    table{
    border: 1px solid;
    margin: auto;
    width: 500px;
}

    效果如下：
    img

  5. 通过CSS，对表格中的行、单元格进行描述：文本信息向中对齐，每个单元格添加一个方框

    td,th{
    text-align: center;
    border: 1px solid;
}

    效果如下：
    img

  6. 通过JavaScript：获取添加按钮对象

    // 1.获取按钮
var btn_add = document.getElementById("btn_add");

  7. 通过JavaScript：获取文本框对象，然后通过其对象获取文本框内容

    // 2.1 获取文本框对象
var idObject = document.getElementById("id");
var nameObject = document.getElementById("name");
var genderObject = document.getElementById("gender");
// 2.2 获取文本框的内容
var id = idObject.value;
var name = nameObject.value;
var gender = genderObject.value;

  8. 通过JavaScript：定义创建表格单元格的HTML

    //3.创建单元格，赋值单元格的标签体
// id 的单元格
var td_id = document.createElement("td");              // 创建单元格
var text_id = document.createTextNode(id);             // 赋值给单元格的标签体
td_id.appendChild(text_id);
// name 的单元格
var td_name = document.createElement("td");
var text_name = document.createTextNode(name);
td_name.appendChild(text_name);
//gender 的单元格
var td_gender = document.createElement("td");
var text_gender = document.createTextNode(gender);
td_gender.appendChild(text_gender);
// a标签的单元格
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_a = document.createTextNode("删除");
ele_a.appendChild(text_a);                         // 为a标签写入文本内容："删除"
td_a.appendChild(ele_a);                           // 为td标签添加子标签（a标签）

  9. 通过JavaScript：定义创建表格行的HTML，将要被创建的单元格添加到表格行

     // 4.创建表格行
 var tr = document.createElement("tr");
 // 5.添加单元格到表格行中
 tr.appendChild(td_id);
 tr.appendChild(td_name);
 tr.appendChild(td_gender);
 tr.appendChild(td_a);

  10. 通过JavaScript：获取表格对象，将定义好的表格行，添加到表格中

     // 6.获取table
 var table = document.getElementsByTagName("table")[0];
 table.appendChild(tr);

  11. 通过JavaScript：定义删除表格行信息的方法

    // 删除方法
function delTr(obj) {
    // 获取table节点
    var table = obj.parentNode.parentNode.parentNode;
    // 获取te节点
    var tr = obj.parentNode.parentNode;
    // 删除（并返回）当前节点的指定子节点。
    table.removeChild(tr);
}

具体实现代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>
    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }
        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin: 50px;
        }
    </style>
</head>
<body>

<!-- 创建一个div块标签，在该块标签中添加三个输入信息（编号、姓名、性别）的框框、一个确认添加的按钮（添加）-->
<div>
    <input type="text" id="id" placeholder="请输入编号">
    <input type="text" id="name"  placeholder="请输入姓名">
    <input type="text" id="gender"  placeholder="请输入性别">
    <input type="button" value="添加" id="btn_add">
</div>

<table>
    <!-- 表格标题 -->
    <caption>学生信息表</caption>
    <!-- 表格第一行：表格表头 -->
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>

    <!-- 表格第二行：学生信息2 -->
    <tr>
        <td>1</td>
        <td>令狐冲</td>
        <td>男</td>
        <!-- 在该单元格中创建一个链接标签，void运算符来阻止href返回值，通过onclick事件(鼠标点击)属性来删除信息行-->
        <td><a href="javascript:void(0);" onclick="deleteTr(this);">删除</a></td>
    </tr>

    <!-- 表格第三行：学生信息2 -->
    <tr>
        <td>2</td>
        <td>任我行</td>
        <td>男</td>
        <!-- 在该单元格中创建一个链接标签，void运算符来阻止href返回值，通过onclick事件(鼠标点击)属性来删除信息行-->
        <td><a href="javascript:void(0);" onclick="deleteTr(this);">删除</a></td>
    </tr>

    <!-- 表格第四行：学生信息3 -->
    <tr>
        <td>3</td>
        <td>岳不群</td>
        <td>?</td>
        <!-- 在该单元格中创建一个链接标签，void运算符来阻止href返回值，通过onclick事件(鼠标点击)属性来删除信息行-->
        <td><a href="javascript:void(0);" onclick="deleteTr(this);" >删除</a></td>
    </tr>
</table>

<script>
    // 1.获取按钮
    var btn_add = document.getElementById("btn_add");
    btn_add.onclick = function() {
        // 2.1 获取文本框对象
        var idObject = document.getElementById("id");
        var nameObject = document.getElementById("name");
        var genderObject = document.getElementById("gender");
        // 2.2 获取文本框的内容
        var id = idObject.value;
        var name = nameObject.value;
        var gender = genderObject.value;

        //3.创建单元格，赋值单元格的标签体
        // id 的 单元格
        var td_id = document.createElement("td");              // 创建单元格
        var text_id = document.createTextNode(id);             // 赋值给单元格的标签体
        td_id.appendChild(text_id);
        // name 的 单元格
        var td_name = document.createElement("td");
        var text_name = document.createTextNode(name);
        td_name.appendChild(text_name);
        //gender 的 单元格
        var td_gender = document.createElement("td");
        var text_gender = document.createTextNode(gender);
        td_gender.appendChild(text_gender);
        // a标签的单元格
        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_a = document.createTextNode("删除");
        ele_a.appendChild(text_a);                         // 为a标签写入文本内容："删除"
        td_a.appendChild(ele_a);                           // 为td标签添加子标签（a标签）

        // 4.创建表格行
        var tr = document.createElement("tr");
        // 5.添加单元格到表格行中
        tr.appendChild(td_id);
        tr.appendChild(td_name);
        tr.appendChild(td_gender);
        tr.appendChild(td_a);
        // 6.获取table
        var table = document.getElementsByTagName("table")[0];
        table.appendChild(tr);
    };

    // 删除方法
    function deleteTr(object) {
        // 获取table节点
        var table = object.parentNode.parentNode.parentNode;
        // 获取te节点
        var tr = object.parentNode.parentNode;
        // 删除（并返回）当前节点的指定子节点。
        table.removeChild(tr);
    }


</script>

</body>
</html>

最终效果如下：可以删除信息，也可以添加信息

img

也可以使用innerHTML进行添加数据，步骤类似上面所述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>

    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }

        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin: 50px;
        }
    </style>

</head>
<body>

<!-- 创建一个div块标签，在该块标签中添加三个输入信息（编号、姓名、性别）的框框、一个确认添加的按钮（添加）-->
<div>
    <input type="text" id="id" placeholder="请输入编号">
    <input type="text" id="name"  placeholder="请输入姓名">
    <input type="text" id="gender"  placeholder="请输入性别">
    <input type="button" value="添加" id="btn_add">
</div>

<table>
    <!-- 表格标题 -->
    <caption>学生信息表</caption>
    <!-- 表格第一行：表格表头 -->
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>

    <!-- 表格第二行：学生信息2 -->
    <tr>
        <td>1</td>
        <td>令狐冲</td>
        <td>男</td>
        <!-- 在该单元格中创建一个链接标签，void运算符来阻止href返回值，通过onclick事件(鼠标点击)属性来删除信息行-->
        <td><a href="javascript:void(0);" onclick="deleteTr(this);">删除</a></td>
    </tr>

    <!-- 表格第三行：学生信息2 -->
    <tr>
        <td>2</td>
        <td>任我行</td>
        <td>男</td>
        <!-- 在该单元格中创建一个链接标签，void运算符来阻止href返回值，通过onclick事件(鼠标点击)属性来删除信息行-->
        <td><a href="javascript:void(0);" onclick="deleteTr(this);">删除</a></td>
    </tr>

    <!-- 表格第四行：学生信息3 -->
    <tr>
        <td>3</td>
        <td>岳不群</td>
        <td>?</td>
        <!-- 在该单元格中创建一个链接标签，void运算符来阻止href返回值，通过onclick事件(鼠标点击)属性来删除信息行-->
        <td><a href="javascript:void(0);" onclick="deleteTr(this);" >删除</a></td>
    </tr>
</table>

<script>
    // 使用innerHTML添加
    document.getElementById("btn_add").onclick = function() {
        // 获取文本框的内容
        var id = document.getElementById("id").value;
        var name = document.getElementById("name").value;
        var gender = document.getElementById("gender").value;

        // 获取table
        var table = document.getElementsByTagName("table")[0];

        // 追加一行
        table.innerHTML += "<tr>\n" +
            "        <td>"+id+"</td>\n" +
            "        <td>"+name+"</td>\n" +
            "        <td>"+gender+"</td>\n" +
            "        <td><a href=\"javascript:void(0);\" onclick=\"delTr(this);\" >删除</a></td>\n" +
            "    </tr>";
    };

    // 删除方法
    function deleteTr(object) {
        // 获取table节点
        var table = object.parentNode.parentNode.parentNode;
        // 获取te节点
        var tr = object.parentNode.parentNode;
        // 删除（并返回）当前节点的指定子节点。
        table.removeChild(tr);
    }

</script>

</body>
</html>
posted @ 2020-03-02 01:55  LeeHua  阅读(22660)  评论(3)  编辑  收藏  举报