表格添加

2022-04-20 02:01:02 作者：互联网

<!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>

效果图：

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

标签：checked,name,表格,value,添加,querySelector,var,document
来源： https://www.cnblogs.com/bg618/p/16168200.html