HTML+JS表单数据动态加入表格--添加删除统计随堂作业 [效果图+代码]

sbhsjjs

于 2024-05-09 15:27:26 发布

阅读量331

点赞数 6

文章标签： javascript 前端开发语言 html5 html

本文链接：https://blog.csdn.net/sbhsjjs/article/details/138616159

版权

代码部分:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>1</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="请输入编号">
<br>
    姓名:<input type="text" id="name"  placeholder="请输入姓名">
<br>
    性别:<input type="radio" value="男" name="gender" checked>男
    <input type="radio" value="女" name="gender">女
    <br>
    年龄:<input type="text" id="age"  placeholder="请输入年龄">
<br>
    学生班级:<select id="cLass">
        <option value="计科211">计科211</option>
        <option value="计科212">计科212</option>
        <option value="计科213">计科213</option>
        <option value="计科214">计科214</option>
    </select>
    <input type="button" value="添加" id="btn_add">
    <br>
    <input type="button" value="统计男女人数" id="btn_sum" onclick="countStudent()">
</div>

 

<table id ="mytable">

    <!-- 表格标题 -->

    <caption>学生信息表</caption>

    <!-- 表格第一行：表格表头 -->

    <tr>

        <th>学号</th>

        <th>姓名</th>

        <th>性别</th>
        <th>年龄</th>
        <th>班级</th>
        <th>操作</th>

    </tr>

 

    <!-- 表格第二行：学生信息2 -->

    <tr>

        <td>1</td>

        <td>令狐冲</td>

        <td>男</td>

        <td>20</td>
        
        <td>计科214</td>


        <!-- 在该单元格中创建一个链接标签，void运算符来阻止href返回值，通过onclick事件(鼠标点击)属性来删除信息行-->

        <td><a href="javascript:void(0);" onclick="deleteTr(this);">删除</a></td>

    </tr>


 

<script>

    // 使用innerHTML添加

    document.getElementById("btn_add").onclick = function() {

        // 获取文本框的内容

        var id = document.getElementById("id").value;

        var name = document.getElementById("name").value;

        var radios=document.getElementsByName("gender");
        var gender ;
        for(var i=0;i<radios.length;i++){
            if(radios[i].checked){
                gender=radios[i].value;
                console.log(gender);
            }
        }

        


        var age=document.getElementById("age").value;
        var cLass=document.getElementById("cLass") .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>"+age+"</td>\n" +

            "        <td>"+cLass+"</td>\n" +

            "        <td><a href=\"javascript:void(0);\" onclick=\"deleteTr(this);\" >删除</a></td>\n" +

            "    </tr>";

    };

 

function countStudent() {
var table=document.getElementById('mytable');
var genderCount={
'男':0,
'女':0
}
for(var i=0;i<table.rows.length;i++){
    var row=table.rows[i];
    var gender=row.cells[2].innerHTML;
genderCount[gender]++;

}

alert("男:"+genderCount["男"]+"\n"+"女:"+genderCount["女"]+"\n");
}


    // 删除方法

    function deleteTr(object) {

        // 获取table节点

        var table = object.parentNode.parentNode.parentNode;

        // 获取te节点

        var tr = object.parentNode.parentNode;

        // 删除（并返回）当前节点的指定子节点。

        table.removeChild(tr);

    }

 

</script>

 

</body>

</html>