DOM练习 选择框表格添加变色
Posted dk2557
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了DOM练习 选择框表格添加变色相关的知识,希望对你有一定的参考价值。
多个选择框,三个按钮,显示:全选、反选、不选
html部分,建立五个多选框,三个按钮
<input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <button onClick="quan()">全选</button>//全选按钮 <button onClick="fan()">反选</button>//反选按钮 <button onClick="bu()">不选</button>//不选按钮
显示结果:
表单中的多选按钮:
<input type="checkbox" checked> 内容
checked 属性是一个布尔属性,默认选中,默认返回值为true.,选中为true,不选中为false.
var inputdom = [];//多选框 window.onload = function () { inputdom = document.getElementsByTagName("input");//获取多选框 } /*功能:全部选中*/ function quan() { for (var i = 0; i < inputdom.length; ++i) { inputdom[i].checked = true; } } /*功能:反向选择*/ function fan() { for (var i = 0; i < inputdom.length; ++i) { console.log(inputdom.length) if (inputdom[i].checked == true) { inputdom[i].checked = false; } else { inputdom[i].checked = true; } } } /*功能:全部不选*/ function bu() { for (var i = 0; i < inputdom.length; ++i) { inputdom[i].checked = false; } }
2、表格添加行、删除行、隔行变色、移入变色
html中新建表头
姓名:<input id="mingzi" type="text" placeholder="必填"> 年龄:<input id="age" type="text" placeholder="必填"> <button onClick="add()">添加一行</button>//添加按钮 <button onClick="color()">隔行变色</button> <button onClick="">移入变色</button> <table width="1000" border="1"> <tr> <th>ID</th> <th>姓名</th> <th>年龄</th> <th>操作</th> </tr> </table>
显示结果:
js中内容,建立三个方法,添加一行、隔行变色、移入变色
var tab=null;//获取表格 var tr_push=[];//添加行 var td_push=[];//添加单元格 var namedom=null; var agedom=null; window.onload = function () { tab=document.getElementsByTagName("table")[0];//获取表格 tr=document.getElementsByTagName("tr"); th=document.getElementsByTagName("th"); namedom=document.getElementById("mingzi"); agedom=document.getElementById("age"); } /*功能:添加行*/ function add(){ tr_push = document.createElement("tr");//创建<tr>标签 for (var i = 0; i < th.length; ++i) { if (i == 0) { td_push = document.createElement("td"); td_push.innerHTML = tr.length; //第一列的内容ID,排序,为tr的长度 } if (i == 1) { td_push = document.createElement("td"); td_push.innerHTML = namedom.value; //第二列的内容姓名,为提取姓名框的内容 } if (i == 2) { td_push = document.createElement("td"); td_push.innerHTML = agedom.value; //第二列的内容姓名,为提取年龄框的内容 } if (i == 3) { td_push = document.createElement("td"); td_push.innerHTML = "<button onClick=‘shan(this)‘>删除</button>"; //将一个button标签作为i=3的内容 //点击时,调用方法删除 } tr_push.appendChild(td_push); } tab.appendChild(tr_push); } /*功能:删除行*/ function shan(obj) { obj.parentNode.parentNode.remove(); //移除button所在标签的父标签的父标签(tr) } /*功能:隔行变色*/ function color(){ for(var i = 0; i < tr.length; i=i+2) //隔行变色,所以 i=i+2 tr[i].style.background = "red"; //给tr添加样式background }
以上是关于DOM练习 选择框表格添加变色的主要内容,如果未能解决你的问题,请参考以下文章
DOM设置表格隔行变色js代码及鼠标悬停在哪行,哪行字体就加粗效果