<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS练习-表格数据的添加与删除、搜索</title>
<style>

</style>
<script>
window.onload=function()
{
 var oTab=document.getElementById('table1')
 var oName=document.getElementById('name')
 var oAge=document.getElementById('age')
 var oBtn=document.getElementById('btn')
 var oSearch=document.getElementById('search')
 var oSearchBtn=document.getElementById('searchBtn')
 var id=oTab.tBodies[0].rows.length+1//定义序号变量

oBtn.onclick=function()
 {
  var oTr=document.createElement('tr')
  
  var oTd=document.createElement('td')
  oTd.innerHTML=id++
  oTr.appendChild(oTd)
  
  var oTd=document.createElement('td')
  oTd.innerHTML=oName.value
  oTr.appendChild(oTd)
  
  var oTd=document.createElement('td')
  oTd.innerHTML=oAge.value
  oTr.appendChild(oTd)
  
  var oTd=document.createElement('td')
  oTd.innerHTML='<a href="javascript:;">删除</a>'
  oTr.appendChild(oTd)//添加表格行
  
  oTd.getElementsByTagName('a')[0].onclick=function()
  {
   oTab.tBodies[0].removeChild(this.parentNode.parentNode)
  
  }//删除表格行
    
  oTab.tBodies[0].appendChild(oTr)
  }
    
  oSearchBtn.onclick=function()
  {

for( var i=0; i<oTab.tBodies[0].rows.length; i++)
   {
    var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase()
             var sTxt=oSearch.value.toLowerCase()
    var attr=sTxt.split('')
    oTab.tBodies[0].rows[i].style.background=''
    for( var j=0; j<attr.length; j++)
    {
    if(sTab.search(attr[j])!=-1)
    {
     oTab.tBodies[0].rows[i].style.background='yellow'
    }

}
   }
  }//模糊搜索，多关键字搜索
}

</script>
</head>

<body>
姓名：<input type="text" id="name"  placeholder="请输入姓名">
年龄：<input type="text" id="age"   placeholder="请输入年龄">
<input id="btn" type="button" value="添加"><br><br>
<input type="text" id="search" placeholder="请输入你的姓名">
<input type="button" id="searchBtn" value="搜索"><br><br>

<table id="table1" border="1" width="800px">
 <thead>
     <td>ID</td>
        <td>姓名</td>
        <td>年龄</td>
        <td>操作</td>
     </thead>
     <tbody>
      <tr>
            <td>1</td>
            <td>陈子君</td>
            <td>25</td>
            <td></td>
           
        </tr>
      <tr>
            <td>2</td>
            <td>Blue</td>
            <td>13</td>
            <td></td>
        </tr>
      <tr>
            <td>3</td>
            <td>张三</td>
            <td>45</td>
            <td></td>
        </tr>
      <tr>
            <td>4</td>
            <td>李四</td>
            <td>50</td>
            <td></td>
        </tr>
      <tr>
            <td>5</td>
            <td>S物流</td>
            <td>35</td>
            <td></td>
        </tr>  
      <tr>
            <td>6</td>
            <td>我</td>
            <td>27</td>
            <td></td>
        </tr>  
      <tr>
            <td>7</td>
            <td>surPrise</td>
            <td>30</td>
            <td></td>
        </tr>
   </tbody>
</table>
</body>
</html>

JS-表格数据的添加与删除、搜索的更多相关文章

  1. JS学习笔记（3）--json格式数据的添加，删除及排序方法

    这篇文章主要介绍了json格式数据的添加,删除及排序方法,结合实例形式分析了针对一维数组与二维数组的json格式数据进行增加.删除与排序的实现技巧,需要的朋友可以参考下   本文实例讲述了json格式 ...

  2. Python实现单链表数据的添加、删除、插入操作

    Python实现单链表数据的添加.删除.插入操作 链表的定义: 链表(linked list)是由一组被称为结点的数据元素组成的数据结构,每个结点都包含结点本身的信息和指向下一个结点的地址.由于每个结 ...

  3. Javascript DOM 03 表格添加、删除 + 搜索

    获取 tBodies.tHead.tFoot.rows.cells   隔行变色 鼠标移入高亮   添加.删除一行 DOM方法的使用                                   ...

  4. js对select动态添加和删除OPTION

    <select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...

  5. 使用js对select动态添加和删除OPTION示例代码

    动态删除select中的所有options.某一项option以及动态添加select中的项option,在IE和FireFox都能测试成功,感兴趣的朋友可以参考下,希望对大家有所帮助   <s ...

  6. SQL Server 数据的添加修改删除和查询

    数据的添加: 首先建立一个数据库,点击新建查询,然后用代码建立一个表,表里写上列名和数据类型,约束可加可不加 然后使用insert语句往表里添加数据 insert [into] 表名 (列名1,列名2 ...

  7. 使用js对select动态添加和删除OPTION

    <select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...

  8. 原生js实现类的添加和删除,以及对数据的add和update、view ，ajax请求 ，页面离开的操作

    1 类操作 function hasClass(cla, element) { if(element.className.trim().length === 0) return false; var ...

  9. js表格上下移动添加删除

    html部分 <div onclick='fn()'>加</div> <table width="250" border="1" ...

随机推荐

  1. hdu 5303 Delicious Apples

    这道题贪心 背包 假设在走半圆之内能够装满,那么一定优于绕一圈回到起点.所以我们从中点将这个分开,那么对于每一个区间由于苹果数非常少,所以能够利用pos[x]数组记录每一个苹果所在的苹果树位置,然后将 ...

  2. Got error: 1449: The user specified as a definer ('root'@'%') does not exist when using LOCK TAB

    在linux下,用mysql的导出语句: mysqldump -hlocalhost -uroot -pPasswd table >/home/ftp/test.sql 出现了 mysqldum ...

  3. 【转】PLSQL_标准删除的方式Delete/Drop/Truncate区别和比较

  4. LoadRunner系列之—-04 录制基于https协议的脚本

    实际性能测试过程中,有些需录制脚本的页面或接口是基于https协议的,按原来方法录制脚本,录完了脚本是空的.为解决这个问题,第一步了解https协议的具体实现,这块网上资料很多,可参考页面下方参考资料 ...

  5. 矩阵经典题目七：Warcraft III 守望者的烦恼（矩阵加速递推）

    https://www.vijos.org/p/1067 非常easy推出递推式f[n] = f[n-1]+f[n-2]+......+f[n-k]. 构造矩阵的方法:构造一个k*k的矩阵.当中右上角 ...

  6. linux driver开发

    1 开发linux driver时的调试思路 基本上是打印调试,原因很简单,方便.或者使用工具挂住cpu.

  7. 编译FreePascal源代码（摘录自邮件询问）

    为了尝试编译FreePascal,我搜了官方文档,并给几位作者都发了邮件询问,目前结果如下: http://wiki.lazarus.freepascal.org/Getting_Lazarus#Co ...

  8. 设计模式-（18）命令模式 （swift版）

    一,概念: 在软件系统中,“行为请求者”与“行为实现者”通常呈现一种“紧耦合”.但在某些场合,比如要对行为进行“记录.撤销/重做.事务”等处理,这种无法抵御变化的紧耦合是不合适的.在这种情况下,如何将 ...

  9. Lightoj 1025 - The Specials Menu

    区间dp /* *********************************************** Author :guanjun Created Time :2016/6/30 23:2 ...

  10. MTK 电池曲线配置【转】

    本文转载自:http://blog.csdn.net/u010245383/article/details/51006597 硬件平台:MT8382 网上有很多关于电池曲线配置的文档,定位到具体的文件 ...