基于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 相关文章推荐
判断用户的在线状态 onbeforeunload事件
Mar 05 Javascript
JS中setInterval、setTimeout不能传递带参数的函数的解决方案
Apr 28 Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
Oct 20 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
May 07 Javascript
javascript实现动态表头及表列的展现方法
Jul 14 Javascript
跟我学习javascript的全局变量
Nov 16 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
Dec 24 Javascript
VueRouter导航守卫用法详解
Dec 25 Javascript
js中call()和apply()改变指针问题的讲解
Jan 17 Javascript
详解Vuex下Store的模块化拆分实践
Jul 31 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 Vue.js
Selenium执行JavaScript脚本的方法示例
Dec 31 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
漂亮但不安全的CTB
2006/10/09 PHP
生成静态页面的PHP类
2006/11/25 PHP
PHP开发过程中常用函数收藏
2009/12/14 PHP
php中创建和调用webservice接口示例
2014/07/25 PHP
phpword插件导出word文件时中文乱码问题处理方案
2014/08/19 PHP
php创建、获取cookie及基础要点分析
2015/01/26 PHP
PHP实现返回JSON和XML的类分享
2015/01/28 PHP
PHP 匿名函数与注意事项详细介绍
2016/11/26 PHP
yii框架无限极分类的实现方法
2017/04/08 PHP
PHP 年月日的三级联动实例代码
2017/05/24 PHP
html文件中jquery与velocity变量中的$冲突的解决方法
2013/11/01 Javascript
调用innerHTML之后onclick失效问题的解决方法
2014/01/28 Javascript
JS实现CheckBox复选框全选全不选功能
2015/05/06 Javascript
jQuery EasyUI Dialog拖不下来如何解决
2015/09/28 Javascript
Javascript 跨域知识详细介绍
2016/10/30 Javascript
简单实现js菜单栏切换效果
2017/03/04 Javascript
原生js实现瀑布流布局
2017/03/08 Javascript
layer.confirm取消按钮绑定事件的方法
2018/08/17 Javascript
小程序云开发部署攻略(图文教程)
2018/10/30 Javascript
深入理解python中的闭包和装饰器
2016/06/12 Python
Python实现一个服务器监听多个客户端请求
2018/04/12 Python
python实现字符串中字符分类及个数统计
2018/09/28 Python
记一次python 内存泄漏问题及解决过程
2018/11/29 Python
Python数据可视化教程之Matplotlib实现各种图表实例
2019/01/13 Python
django解决订单并发问题【推荐】
2019/07/31 Python
python闭包与引用以及需要注意的陷阱
2020/09/18 Python
俄罗斯领先的移动和数字设备在线商店:Svyaznoy.ru
2020/12/21 全球购物
住房公积金接收函
2014/01/09 职场文书
客户经理竞聘演讲稿
2014/05/15 职场文书
电子商务系毕业生自荐信
2014/05/29 职场文书
数学教研活动总结
2014/07/02 职场文书
班子个人四风问题整改措施
2014/10/04 职场文书
2014报到证办理个人委托书
2014/10/08 职场文书
单位法人授权委托书范本
2014/10/09 职场文书
小学英语教师2015年度个人工作总结
2015/10/14 职场文书
2019年朋友圈经典励志语录50条
2019/07/05 职场文书