基于javascript實現(xiàn)表格的簡單操作

更新時間：2016年05月21日 15:36:49 作者：朱鵬-天羽

這篇文章主要為大家詳細介紹了基于javascript實現(xiàn)表格的簡單操作，具有一定的參考價值，感興趣的朋友可以參考一下

本文實例為大家分享了js表格操作的簡單方法，供大家參考，具體內(nèi)容如下

<!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="請輸入搜索內(nèi)容" 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>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助。

您可能感興趣的文章: