基于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 相关文章推荐
任意位置显示html菜单
Feb 01 Javascript
JQuery伸缩导航练习示例
Nov 13 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
May 04 Javascript
JQuery实现图片轮播效果
Sep 15 Javascript
js实现动态创建的元素绑定事件
Jul 19 Javascript
js 获取当前web应用的上下文路径实现方法
Aug 19 Javascript
js中class的点击事件没有效果的解决方法
Oct 13 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
Feb 23 Javascript
Angular.js 4.x中表单Template-Driven Forms详解
Apr 25 Javascript
javaScript字符串工具类StringUtils详解
Dec 08 Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
Nov 28 Javascript
React Hooks 实现和由来以及解决的问题详解
Jan 17 Javascript
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
怎样在UNIX系统下安装php3
2006/10/09 PHP
在php中判断一个请求是ajax请求还是普通请求的方法
2011/06/28 PHP
基于magic_quotes_gpc与magic_quotes_runtime的区别与使用介绍
2013/04/22 PHP
php 生成自动创建文件夹并上传文件的示例代码
2014/03/07 PHP
PHP使用CURL实现多线程抓取网页
2015/04/30 PHP
关于PHP转换超过2038年日期出错的问题解决
2017/06/28 PHP
查看图片(前进后退)功能实现js代码
2013/04/24 Javascript
七个很有意思的PHP函数
2014/05/12 Javascript
nodejs npm install全局安装和本地安装的区别
2014/06/05 NodeJs
Jquery AJAX POST与GET之间的区别详细介绍
2016/10/17 Javascript
js中数组的常用方法小结
2016/12/30 Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
2017/03/07 Javascript
JS实现图片手风琴效果
2020/04/17 Javascript
基于es6三点运算符的使用方法(实例讲解)
2017/10/12 Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
2018/09/25 Javascript
vue解决一个方法同时发送多个请求的问题
2018/09/25 Javascript
在vue项目中正确使用iconfont的方法
2018/09/28 Javascript
angularJs中ng-model-options设置数据同步的方法
2018/09/30 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
2020/04/30 Javascript
JavaScript如何使用插值实现图像渐变
2020/06/28 Javascript
vue实现移动端拖动排序
2020/08/21 Javascript
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
2020/11/16 Javascript
在Python中利用Pandas库处理大数据的简单介绍
2015/04/07 Python
python基于phantomjs实现导入图片
2016/05/13 Python
利用python获取某年中每个月的第一天和最后一天
2016/12/15 Python
Python如何生成树形图案
2018/01/03 Python
Python对List中的元素排序的方法
2018/04/01 Python
python numpy和list查询其中某个数的个数及定位方法
2018/06/27 Python
Matplotlib.pyplot 三维绘图的实现示例
2020/07/28 Python
css3选择器基本介绍
2014/12/15 HTML / CSS
乔丹诺(Giordano)酒庄德国官网:找到最好的意大利葡萄酒
2017/12/28 全球购物
法律七进实施方案
2014/03/15 职场文书
个人担保书格式范文
2014/05/12 职场文书
领导班子党的群众路线对照检查材料
2014/09/25 职场文书
捐款感谢信
2015/01/20 职场文书
民事申诉状范本
2015/05/20 职场文书