DOM-表格变色、添加、删除、搜索、排序、表单

2025-01-11 技术教程

1、表格，隔行变色

<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><script>window.onload=function(){varotab=document.getElementById('tb1')//otab.tBodies[0].rows[].cells[]varoldColor=''for(vari=otab.tBodies[0].rows.length-1;i>=0;i--){if(i%2){otab.tBodies[0].rows[i].style.background='red'}else{otab.tBodies[0].rows[i].style.background='gray'}otab.tBodies[0].rows[i].onmouseover=function(){oldColor=this.style.backgroundthis.style.background='green'}otab.tBodies[0].rows[i].onmouseout=function(){this.style.background=oldColor}}}</script></head><body><tableid="tb1"border="1"width="500"><thead><td>ID</td><td>name</td><td>age</td></thead><tbody><tr><td>1</td><td>cxiong</td><td>29</td></tr><tr><td>2</td><td>mm</td><td>29</td></tr><tr><td>3</td><td>dd</td><td>1</td></tr></tbody></table></body></html>

2、表格的行的添加和删除

<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><script>window.onload=function(){varotab=document.getElementById('tb1')//otab.tBodies[0].rows[].cells[]varob=document.getElementById('b1')varoname=document.getElementById('name')varoage=document.getElementById('age')varid=otab.tBodies[0].rows.length+1ob.onclick=function(){//创建tr元素varotr=document.createElement('tr')//创建td元素varotd=document.createElement('td')otd.innerHTML=id++otr.appendChild(otd)varotd=document.createElement('td')otd.innerHTML=oname.valueotr.appendChild(otd)varotd=document.createElement('td')otd.innerHTML=oage.valueotr.appendChild(otd)varotd=document.createElement('td')otd.innerHTML='<ahref="javascript:">delete</a>'otr.appendChild(otd)otd.getElementsByTagName('a')[0].onclick=function(){otab.tBodies[0].removeChild(this.parentNode.parentNode)}//添加元素otab.tBodies[0].appendChild(otr)}}</script></head><body>name:<inputtype="text"id="name">age:<inputtype="text"id="age"><inputtype="button"id="b1"value="添加"><tableid="tb1"border="1"width="500"><thead><td>ID</td><td>name</td><td>age</td><td>action</td></thead><tbody><tr><td>1</td><td>cxiong</td><td>29</td></tr><tr><td>2</td><td>mm</td><td>29</td></tr><tr><td>3</td><td>dd</td><td>1</td></tr></tbody></table></body></html>

3、表格高亮、模糊、多关键字搜索

<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><script>window.onload=function(){varotab=document.getElementById('tb1')varot=document.getElementById('name')varob=document.getElementById('b1')ob.onclick=function(){//body...for(vari=otab.tBodies[0].rows.length-1;i>=0;i--){//转换小写toLowerCase()vararr=ot.value.toLowerCase().split('')otab.tBodies[0].rows[i].style.background=''//otab.tBodies[0].rows[i].style.display='none'//多关键字、模糊搜索for(varj=arr.length-1;j>=0;j--){if(otab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase().search(arr[j])!=-1){otab.tBodies[0].rows[i].style.background='yellow'//otab.tBodies[0].rows[i].style.display='block'}}}}}</script></head><body>name:<inputtype="text"id="name"><inputtype="button"value="search"id="b1"><tableid="tb1"border="1"width="500"><thead><td>ID</td><td>name</td><td>age</td><td>action</td></thead><tbody><tr><td>1</td><td>cxiong</td><td>29</td></tr><tr><td>2</td><td>mm</td><td>29</td></tr><tr><td>3</td><td>dd</td><td>1</td></tr></tbody></table></body></html>

4、表格排序

<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><script>window.onload=function(){varou1=document.getElementById('ul1')varou2=document.getElementById('ul2')varob=document.getElementById('b1')ob.onclick=function(){//body...//varoli=ou1.children[0]//ou1.removeChild(oli)//appendChile，先把元素从原有父级上删掉，添加到新的父级上//ou1.appendChild(oli)//ou2.appendChild(oli)varali=ou1.getElementsByTagName('li')vararr=[]for(vari=ali.length-1;i>=0;i--){arr[i]=ali[i]}//排序：li中的内容innerHTMLarr.sort(function(li1,li2){return(parseFloat(li1.innerHTML)-parseFloat(li2.innerHTML))})//根据排序结果，添加li元素for(vari=arr.length-1;i>=0;i--){ou1.appendChild(arr[i])}}}</script></head><body><ulid="ul1"><li>1</li><li>22</li><li>3</li><li>14</li></ul><inputtype="button"value="sort"id="b1"><ulid="ul2"></ul></body></html>

5、表单

<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><script>window.onload=function(){varof=document.getElementById('f1')of.onsubmit=function(){//body...alert("submit")}of.onreset=function(){alert("reset")}}</script></head><body><formid="f1"action="www.baidu.com"method="get"accept-charset="utf-8">用户名：<inputtype="text"name="user"><br>密码：<inputtype="text"name="password"value=""><br><inputtype="submit"value="提交"><inputtype="reset"value="重置"></form></body></html>