基于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 相关文章推荐
jquery判断单个复选框是否被选中的代码
Sep 03 Javascript
用jquery实现下拉菜单效果的代码
Jul 25 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
Jan 09 Javascript
用jquery写的一个万年历(自写)
Jan 20 Javascript
分享一些常用的jQuery动画事件和动画函数
Nov 27 Javascript
纯js代码生成可搜索选择下拉列表的实例
Jan 11 Javascript
Vue组件中slot的用法
Jan 30 Javascript
React之PureComponent的使用作用
Jul 10 Javascript
vue实现商品加减计算总价的实例代码
Aug 12 Javascript
玩转Koa之核心原理分析
Dec 29 Javascript
layui table单元格事件修改值的方法
Sep 24 Javascript
微信小程序实现导航栏和内容上下联动功能代码
Jun 29 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
PHP生成数组再传给js的方法
2014/08/07 PHP
使用ThinkPHP生成缩略图及显示
2017/04/27 PHP
php实现的PDO异常处理操作分析
2018/12/27 PHP
ExtJs中简单的登录界面制作方法
2010/08/19 Javascript
js检测网络是否具体连接功能的代码
2014/05/23 Javascript
node.js中的fs.write方法使用说明
2014/12/15 Javascript
webapp框架AngularUI的demo改造之路
2014/12/21 Javascript
js实现仿京东2级菜单效果(带延时功能)
2015/08/27 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
2015/12/26 Javascript
JS实现兼容各种浏览器的获取选择文本的方法【测试可用】
2016/06/21 Javascript
HTML页面定时跳转方法解析(2种任选)
2016/12/22 Javascript
如何获取元素的最终background-color
2017/02/06 Javascript
JavaScript实现移动端轮播效果
2017/06/06 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
2017/11/12 Javascript
js 毫秒转天时分秒的实例
2017/11/17 Javascript
Element-UI中Upload上传文件前端缓存处理示例
2019/02/21 Javascript
利用JavaScript模拟京东按键输入功能
2020/12/01 Javascript
[56:21]LGD vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python交换变量
2008/09/06 Python
Python程序员面试题 你必须提前准备!(答案及解析)
2018/01/23 Python
网红编程语言Python将纳入高考你怎么看?
2018/06/07 Python
Python中应该使用%还是format来格式化字符串
2018/09/25 Python
Python 迭代,for...in遍历,迭代原理与应用示例
2019/10/12 Python
vim自动补全插件YouCompleteMe(YCM)安装过程解析
2019/10/21 Python
python GUI库图形界面开发之PyQt5信号与槽基础使用方法与实例
2020/03/06 Python
python pillow库的基础使用教程
2021/01/13 Python
python Matplotlib基础--如何添加文本和标注
2021/01/26 Python
利用CSS3实现自定义滚动条代码分享
2016/08/18 HTML / CSS
个性化皮包、小袋、生活配件:Mon Purse
2019/03/26 全球购物
什么是SQL Server的确定性函数和不确定性函数
2016/08/04 面试题
程序员跳槽必看面试题总结
2013/06/28 面试题
《开国大典》教学反思
2014/04/19 职场文书
食品流通安全承诺书
2014/05/22 职场文书
2014年办公室工作总结范文
2014/11/12 职场文书
Javascript 解构赋值详情
2021/11/17 Javascript
Python使用PyYAML库读写yaml文件的方法
2022/04/06 Python