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

2019-11-20 09:58:21

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助。

上一篇：简单掌握JavaScript中const声明常量与变量的用法

下一篇：javascript检测移动设备横竖屏