Java教程

表格添加

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

效果图：

 

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

 

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