页面点击按钮添加一行 删除一行 全选 反选 全不选
页面效果图如下
html页面代码
<!DOCTYPE html><html><head><meta charset="UTF-8"><link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css" /><script type="text/javascript" src="js/jquery-3.2.1.min.js"></script><script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script><title></title><script>var rows = 1;function addrows() {var trElement = document.createElement("tr");var td1Element = document.createElement("td");var td2Element = document.createElement("td");var td3Element = document.createElement("td");var td4Element = document.createElement("td");td1Element.innerHTML="<input type='checkbox' value='1' name='chk'>"+rows;td2Element.innerHTML="<input type='text' value='' required name='account' class='form-control'>";td3Element.innerHTML="<input type='password' value='' required name='password' class='form-control'>";td4Element.innerHTML="<input type='button' value='删除当前行' class='btn btn-danger' οnclick='delrow(this)'>";trElement.appendChild(td1Element);trElement.appendChild(td2Element);trElement.appendChild(td3Element);trElement.appendChild(td4Element);var tbody = document.getElementById("tb");tbody.appendChild(trElement);rows++;}function delrow(obj){//获取按钮所在的行btnTrElement = obj.parentNode.parentNode;//alert(btnTrElement.nodeName);//获取按钮所在的行的上一级也就是TBODYtbodyElemement = btnTrElement.parentNode;//通过tobody干掉trtbodyElemement.removeChild(btnTrElement);}</script></head><body><form><table class="table table-responsive table-striped" id="table"><thead><th>序号</th><th>账号</th><th>口令</th><th>操作</th></thead><tbody id="tb"><!--<tr><td></td><td></td><td></td><td></td></tr>--></tbody><tfoot><tr><td align="center" colspan="4"><button class="btn btn-success" onclick="qx()">全选</button> <button class="btn btn-warning" onclick="fx()">反选</button> <button class="btn btn-danger" onclick="qbx()">全不选</button> <input class="btn btn-info" type="submit" value="哦了提交"><button class="btn btn-primary" onclick="addrows()">添加一行</button></td></tr></tfoot></table></form><script>function qx(){//获取所有的checkboxvar checkbox = document.getElementsByName("chk");//遍历所有的checkboxfor (var i=0;i<checkbox.length;i++) {checkbox[i].checked=true;}}function fx(){//获取所有的checkboxvar checkbox = document.getElementsByName("chk");//遍历所有的checkboxfor (var i=0;i<checkbox.length;i++) {checkbox[i].checked=!checkbox[i].checked;}}function qbx(){//获取所有的checkboxvar checkbox = document.getElementsByName("chk");//遍历所有的checkboxfor (var i=0;i<checkbox.length;i++) {checkbox[i].checked=false;}}</script></body></html>
