1.表格的更加与删除
<!DOCTYPE html> <html> <head> <title>表格操作</title> <style type="text/css"> table{ border: 1px solid black; } tr td{ border: 1px solid black; width: 50px; } </style> </head> <body> <input type="text" placeholder="年龄" id="age"> <input type="text" placeholder="姓名" id="uname"> <button type="button" id="add">增加</button> <input type="text" placeholder="输入ID号" id="userId"> <button type="button" id="del">删除</button> <table> <thead> <tr> <td>ID</td> <td>姓名</td> <td>年龄</td> <td>操作</td> </tr> </thead> <tbody> <tr> <td>1</td> <td>张三</td> <td>22</td> <td><a href="javascript:void(0);">删除</a></td> </tr> <tr> <td>2</td> <td>李四</td> <td>20</td> <td><a href="javascript:void(0);">删除</a></td> </tr> <tr> <td>3</td> <td>小王</td> <td>11</td> <td><a href="javascript:void(0);">删除</a></td> </tr> </tbody> </table> </div> <script type="text/javascript"> var uname = document.getElementById('uname'); var age = document.getElementById('age'); var oAdd = document.getElementById('add'); var oDels = document.getElementsByTagName('a'); var oTab = document.getElementsByTagName('table')[0]; var oDel = document.getElementById('del'); var uid = document.getElementById('userId'); var num = oTab.tBodies[0].rows.length; oAdd.onclick = function (){ var oTr = document.createElement('tr'); var info = new Array(); info.push(++num); info.push(uname.value); info.push(age.value); info.push("<a href='javascript:void(0);'>删除</a>"); var len = info.length; for(var i=0; i<len;i++){ var oTd = document.createElement('td'); oTd.innerHTML = info.shift(); oTr.appendChild(oTd); } oTab.tBodies[0].appendChild(oTr); for(var i=0; i<oDels.length; i++){ var del = oDels[i]; del.onclick = function (){ oTab.tBodies[0].removeChild(this.parentNode.parentNode); } } } for(var i=0; i<oDels.length; i++){ var del = oDels[i]; del.onclick = function (){ oTab.tBodies[0].removeChild(this.parentNode.parentNode); } } oDel.onclick = function (){ var id = uid.value; var rows = oTab.tBodies[0].rows; for(var i=0; i<rows.length; i++){ if(id == rows[i].cells[0].innerHTML){ var parent = rows[i].cells[0].parentNode; parent.parentNode.removeChild(parent); return; } } } </script> </body> </html>
2.鼠标控制每行变色
<!DOCTYPE html> <html> <head> <title>表格操作</title> <style type="text/css"> table{ border: 1px solid black; } tr td{ border: 1px solid black; width: 50px; } </style> </head> <body> <table> <thead> <tr> <td>ID</td> <td>姓名</td> <td>年龄</td> </tr> </thead> <tbody> <tr> <td>1</td> <td>张三</td> <td>22</td> </tr> <tr> <td>2</td> <td>李四</td> <td>20</td> </tr> <tr> <td>3</td> <td>小王</td> <td>11</td> </tr> </tbody> </table> </div> <script type="text/javascript"> var oTab = document.getElementsByTagName('table')[0]; var oRows = oTab.tBodies[0].rows; for(var i=0; i<oRows.length; i++){ oRows[i].style.background = "#DCDCDC"; oRows[i].onmouseover = function (){ this.style.background = "gray"; } oRows[i].onmouseout = function (){ this.style.background = "#DCDCDC"; } } </script> </body> </html>
3.字符串大小写转换
<!DOCTYPE html> <html> <head> </head> <body> <script type="text/javascript"> var str = "AbCd"; alert(str.toUpperCase()); alert(str.toLowerCase()); </script> </body> </html>
4.模糊搜索
<!DOCTYPE html> <html> <head> </head> <body> <script type="text/javascript"> var str = "AbCdef"; //查找时区分大小写,若找到则返回子串的起始位置，否则返回-1 if(str.search("bC") != -1){ alert("find out"); } </script> </body> </html>
5.字符串分割
<!DOCTYPE html> <html> <head> </head> <body> <script type="text/javascript"> var str = "AbCdef 张 小"; //查找时区分大小写,若找到则返回子串的起始位置，否则返回-1 var strEles = str.split(' '); for(var i=0; i<strEles.length; i++){ alert(strEles[i]); } </script> </body> </html>
6.列表排序
<!DOCTYPE html> <html> <head> <title>列表排序</title> </head> <body> <button type="button" id="sort">排序</button> <ul> <li>13</li> <li>2</li> <li>5</li> <li>4</li> </ul> <script type="text/javascript"> var oUl = document.getElementsByTagName('ul')[0]; //返回所有li元素集合(全是对象引用) var oLis = oUl.getElementsByTagName('li'); var arr = new Array(); for(var i=0; i<oLis.length; i++){ arr.push(oLis[i]); } //调整数组中引用的顺序 arr.sort(function(li1, li2){ var num1 = parseInt(li1.innerHTML); var num2 = parseInt(li2.innerHTML); return num1 - num2; }); var oBtn = document.getElementById('sort'); oBtn.onclick = function (){ for(var i=0; i<oLis.length; i++){ //如果子节点中有相同的引用,则先将引用删除，再将新的添加到尾部 oUl.appendChild(arr[i]); } } </script> </body> </html>