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


Posted in Javascript onMay 21, 2016

本文实例为大家分享了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 相关文章推荐
JavaScript读取中文cookie时的乱码问题的解决方法
Oct 14 Javascript
javascript与CSS复习(《精通javascript》)
Jun 29 Javascript
jquery中ajax学习笔记一
Oct 16 Javascript
jquery 之 $().hover(func1, funct2)使用方法
Jun 14 Javascript
基于JQuery 滑动与动画的说明介绍
Apr 18 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
Apr 12 Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
Sep 17 Javascript
微信小程序 form组件详解
Oct 25 Javascript
基于JavaScript实现带缩略图的轮播效果
Jan 12 Javascript
jquery根据name取得select选中的值实例(超简单)
Jan 25 jQuery
React精髓!一篇全概括小结(急速)
May 23 Javascript
el-table-column 内容不自动换行的解决方法
Aug 14 Vue.js
javascript检测移动设备横竖屏
May 21 #Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
May 21 #Javascript
js+html5实现canvas绘制网页时钟的方法
May 21 #Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
May 21 #Javascript
javascript RegExp 使用说明
May 21 #Javascript
js+html5实现canvas绘制椭圆形图案的方法
May 21 #Javascript
jQuery DataTables插件自定义Ajax分页实例解析
Apr 28 #Javascript
You might like
《一拳超人》埼玉一拳下去,他们存在了800年毫无意义!
2020/03/02 日漫
php中通过curl检测页面是否被百度收录
2013/09/27 PHP
ThinkPHP的cookie和session冲突造成Cookie不能使用的解决方法
2014/07/01 PHP
php观察者模式应用场景实例详解
2017/02/03 PHP
PHP preg_match实现正则表达式匹配功能【输出是否匹配及匹配值】
2017/07/19 PHP
PHPMailer ThinkPHP实现自动发送邮件功能
2018/06/10 PHP
TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例
2018/09/03 PHP
Prototype使用指南之string.js
2007/01/10 Javascript
关于文本限制字数的js代码
2007/04/02 Javascript
用js查找法实现当前栏目的高亮显示的代码
2007/11/24 Javascript
js CSS操作方法集合
2008/10/31 Javascript
JavaScript二维数组实现的省市联动菜单
2014/05/08 Javascript
javascript实现的网站访问量统计代码
2015/12/20 Javascript
Jquery 自定义事件实现发布/订阅的简单实例
2016/06/12 Javascript
AngularJS基础 ng-keyup 指令简单示例
2016/08/02 Javascript
JS触发服务器控件的单击事件(详解)
2016/08/06 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
2016/12/16 Javascript
深入理解javascript的getTime()方法
2017/02/16 Javascript
JS中Safari浏览器中的Date
2017/07/17 Javascript
深入理解Node module模块
2018/03/26 Javascript
快速解决vue在ios端下点击响应延时的问题
2018/08/27 Javascript
Javascript组合继承方法代码实例解析
2020/04/02 Javascript
python魔法方法-属性访问控制详解
2016/07/25 Python
Python数据分析之双色球基于线性回归算法预测下期中奖结果示例
2018/02/08 Python
python多进程提取处理大量文本的关键词方法
2018/06/05 Python
Python基本数据结构与用法详解【列表、元组、集合、字典】
2019/03/23 Python
TensorFlow打印输出tensor的值
2020/04/19 Python
加拿大在线隐形眼镜和眼镜店:VisionPros
2019/10/06 全球购物
中专生自我鉴定书范文
2013/12/28 职场文书
《纸船和风筝》教学反思
2014/02/15 职场文书
2014年大学生党课心得体会范文
2014/03/29 职场文书
三年级班级文化建设方案
2014/05/04 职场文书
药店营业员岗位职责
2015/04/14 职场文书
学校运动会加油词
2015/07/18 职场文书
《少年闰土》教学反思
2016/02/18 职场文书
详解MySQL事务的隔离级别与MVCC
2021/04/22 MySQL