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

前端技术 2023/09/01 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>

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

本文地址：https://www.stayed.cn/item/1271

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案