表格添加
<!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> 效果图：
效果图：当在右边表格添加输入内容点击添加按钮时让左边显示出内容 并且会清空右边表格的内容
