基于javascript实现表格的简单操作

本文实例为大家分享了js表格操作的简单方法，供大家参考，具体内容如下
<！DOCTYPE html><html><head><meta charset="utf-8" /><title>zzzz</title><style>*{margin: 0;padding: 0;}body{width: 1000px;margin: 100px auto;font-family: "微软雅黑";font-size: 18px;background-color: #fff;}#table tr{text-align: center;}tbody tr:nth-child（2n+1）{background-color: #ccc;}tbody tr:hover{background-color: green;}input[type=text]{height: 25px;width: 136px;background-color: turquoise;margin-bottom: 10px;}</style><script type="text/javascript">window.onload=function（）{var otb=document.getElementById（"table"）;var otr=otb.tBodies[0].rows;var oadd=document.getElementById（"add"）;var oname=document.getElementById（"name"）;var osex=document.getElementById（"sex"）;var id=otr.length+1;oadd.onclick=function（）{var atr=document.createElement（"tr"）;var atd1=document.createElement（"td"）;var atd2=document.createElement（"td"）;var atd3=document.createElement（"td"）;var atd4=document.createElement（"td"）;atd4.innerHTML="<a>删除</a>";atd1.innerHTML=id++;atd2.innerHTML=oname.value;atd3.innerHTML=osex.value; atr.appendChild（atd1）;atr.appendChild（atd2）;atr.appendChild（atd3）;atr.appendChild（atd4）otb.tBodies[0].appendChild（atr）; atd4.getElementsByTagName（"a"）[0].onclick=function（）{otb.tBodies[0].removeChild（this.parentNode.parentNode）} } var obtn=document.getElementById（"btn"）;var otxt=document.getElementById（"ss"）; obtn.onclick=function（）{for（var i=0;i<otb.tBodies[0].rows.length;i++）{var osta=otb.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase（）;var ot=otxt.value.toLowerCase（）;var oar=ot.split（" "）;otb.tBodies[0].rows[i].style.background="";for（var j=0;j<oar.length;j++）{if（osta.search（oar[j]）！=-1）{otb.tBodies[0].rows[i].style.background="red";}} }}}</script></head><body><input type="text" placeholder="请输入搜索内容" id="ss"/><input type="button" value="查询" id="btn"/><br />姓名：<input type="text" id="name" />性别：<input type="text" id="sex" /><input type="button" value="添加" id="add"/><table border="1" width="400px" id="table"><thead><tr><td>序号</td><td>人名</td><td>性别</td><td>修改</td></tr><tbody><tr><td>1</td><td>张三</td><td>男</td><td>删除</td></tr><tr><td>2</td><td>李四</td><td>男</td><td>删除</td></tr><tr><td>3</td><td>Caesar</td><td>女</td><td>删除</td></tr><tr><td>4</td><td>刘言</td><td>女</td><td>删除</td></tr></tbody></thead></table></body></html>
以上就是本文的全部内容，希望对大家的学习有所帮助。