<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #form1 { 480px; border: 1px solid #eee; border-radius: 5px; margin: 30px auto; padding: 10px; line-height: 30px; position: relative; } #tab1 { 500px; margin: 30px auto; border-collapse: collapse; } th, td { border: 1px solid #000; padding: 5px; } tr { cursor: pointer; } tbody tr td:first-child { text-align: center; } input[type="checkbox"] { 15px; height: 15px; } input[type="button"] { position: absolute; right: 10px; bottom: 10px; } #div1 { position: relative; 480px; padding: 10px; margin: 0 auto; } </style> <script type="text/javascript"> function getChecked(form,name) { var arr = []; for (var i = 0; i < form[name].length; i++) { if(form[name][i].checked) { arr.push(form[name][i].value) } } if(form[name][0].type == 'radio') { return arr[0]; } if(form[name][0].type == 'checkbox') { return arr; } }; </script> <script type="text/javascript"> window.onload = function () { var data = [ {'name': '赵一', 'sex': '男', 'age': '35'}, {'name': '钱二', 'sex': '女', 'age': '28'}, {'name': '孙三', 'sex': '男', 'age': '15'}, {'name': '李四', 'sex': '男', 'age': '48'}, {'name': '周五', 'sex': '男', 'age': '36'}, {'name': '武六', 'sex': '女', 'age': '49'}, {'name': '郑七', 'sex': '女', 'age': '75'}, {'name': '王九', 'sex': '男', 'age': '17'}, ]; var otab = document.getElementById('tab1'); var obody = otab.tBodies[0]; var oform = document.getElementById('form1'); var oall = document.getElementById('checkAll'); var odelet = document.getElementById('delete'); for( var i = 0; i < data.length; i++) { var otr = document.createElement('tr'); var otd = document.createElement('td'); otd.innerHTML = '<input type="checkbox">' otr.appendChild(otd); var otd = document.createElement('td'); otd.innerHTML = data[i].name; otr.appendChild(otd); var otd = document.createElement('td'); otd.innerHTML = data[i].sex; otr.appendChild(otd); var otd = document.createElement('td'); otd.innerHTML = data[i].age; otr.appendChild(otd); obody.appendChild(otr); colorline(); } checkbox(); oform.add.onclick = function () { arr = []; arr[0] = oform.name.value; arr[1] = getChecked(oform,'sex'); arr[2] = oform.age.value; for(var i = 0; i < arr.length; i++ ) { var otr = document.createElement('tr'); var otd = document.createElement('td'); otd.innerHTML = '<input type="checkbox">' otr.appendChild(otd); for(var i = 0; i < arr.length; i++) { var otd = document.createElement('td'); otd.innerHTML = arr[i]; otr.appendChild(otd); } } obody.appendChild(otr); oform.reset(); colorline(); checkbox(); }; function colorline() { for( var i = 0; i < obody.rows.length; i++ ) { if(i%2) { obody.rows[i].style.background = '#fff'; } else { obody.rows[i].style.background = 'pink'; } } }; function checkbox() { for(var i = 0; i < obody.rows.length; i++ ) { obody.rows[i].onclick = function () { this.cells[0].children[0].checked = this.cells[0].children[0].checked == false?true:false; check(); } obody.rows[i].cells[0].children[0].onclick = function () { this.checked = this.checked == false ? true:false; check(); } } } otab.tHead.onclick = function () { oall.checked = oall.checked == false ? true: false; checkall(); }; oall.onclick = function () { this.checked = this.checked == false ? true:false; checkall(); } function checkall() { for( var i = 0; i < obody.rows.length; i++ ) { obody.rows[i].cells[0].children[0].checked = oall.checked; } }; function check() { for( var i = 0; i < obody.rows.length; i++) { if(!obody.rows[i].cells[0].children[0].checked) { oall.checked = false; return; } } oall.checked = true; } odelet.onclick = function () { oall.checked = false; for(var i = 0; i < obody.rows.length; i++ ) { if(obody.rows[i].cells[0].children[0].checked) { obody.removeChild(obody.rows[i]) i--; } } colorline(); } } </script> </head> <body> <form id="form1"> 请输入姓名：<input type="text" name="name"><br> 请选择性别：<input type="radio" name="sex" value="男">男<input type="radio" name="sex" value="女">女<br> 请输入年龄：<input type="text" name="age"><br> <input type="button" value="添加到表格" name="add"> </form> <table id="tab1"> <thead> <tr> <th width="20%"><input type="checkbox" id="checkAll" id="checkAll"/> 全选</th> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> </thead> <tbody></tbody> </table> <div id="div1"> <input type="button" value="删除所选行" id="delete"> </div> </body> </html>