表格添加

2022/4/20 6:13:45

编程Tag： 表格 value var 添加 name checked querySelector document

本文主要是介绍表格添加，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

<!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>
</head>
<style>
    body>form,body>table{
        float: left;
    }
    body>table{
        margin-right: 50px;
        text-align: center;
    }
</style>
<body>
<table border=1 width="500">
    <caption><h2>内容显示</h2></caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>
<form action="">
    <table>
        <caption><h2>表格添加</h2></caption>
        <tr>
            <td>姓名： </td>
            <td><input type="text" name="name"></td>
        </tr>
        <tr>
            <td>年龄： </td>
            <td><input type="text" name="age"></td>
        </tr>
        <tr>
            <td>性别： </td>
            <td>
                <input type="radio" name="sex" value="男">男
                <input type="radio" name="sex" value="女">女
            </td>
        </tr>
        <tr>
            <td></td>
            <td><input type="button" value="添加"></td>
        </tr>
    </table>
</form>
</body>
<script>
//获取按钮
var btn = document.querySelector('[type="button"]');
var tbody = document.querySelector('tbody');
console.log(tbody)
//给按钮添加事件监听
btn.addEventListener('click', add)
function add() {
    //获取数据
    var username = document.querySelector('[name="name"]').value;
    var age = document.querySelector('[name="age"]').value;
    var sexs = document.querySelectorAll('[name="sex"]');
    //通过输出每个单选框，发现被选中的单选框，他有一个对象的属性checked，选中的是true，没选中的是false - 通过遍历两个单选框，判断哪个的checked属性是true，要谁的value - 选中的value

    for(var i=0; i<sexs.length; i++) {
        if(sexs[i].checked) {
            var sex = sexs[i].value
            break
        }
    }

    //通过数据组合一个tr放在tbody中
    var str = ''
    str += '<tr>'
        str += '<td>'+username+'</td>'
        str += '<td>'+age+'</td>'
        str += '<td>'+sex+'</td>'
    str += '</tr>'
    tbody.innerHTML += str

    //将表单清空
    document.querySelector('[name="name"]').value = '';
    document.querySelector('[name="age"]').value = '';
    //通过单选框的checked属性可以知道哪个是选中的
    sexs[0].checked = false
    sexs[1].checked = false
}
</script>
</html>

效果图：

效果图：当在右边表格添加输入内容点击添加按钮时让左边显示出内容并且会清空右边表格的内容

这篇关于表格添加的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

表格添加

相关编程文章