<!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. 编译iOS使用的.a库文件

    首先是须要编译成.a的源文件 hello.h: #ifndef __INCLUDE_HELLO_H__ #define __INCLUDE_HELLO_H__ void hello(const cha ...

  2. 答读者问(6)：有关IT培训和毕业之前的迷茫等问题

    近期在微博上与一些读者朋友们交流,发现大家对自己的未来都比較的关心.有些朋友认为在大学里面没有学到什么东西,问我要不要到一些IT培训机构去"速成".另一些朋友即将毕业,不知道自己走 ...

  3. uva live 4394 String painter 区间dp

    // uva live 4394 String painter // // 这一题是训练指南上dp专题的习题,初看之下认为仅仅是稍微复杂了一点 // 就敲阿敲阿敲,两个半小时后,发现例子过了.然而自己 ...

  4. 移动APP怎样保存用户password

    <span style="font-size:14px;">为了更好的用户体验,移动APPclient一般都会将用户信息进行保存以便兴许能够自己主动登录.</sp ...

  5. Chapter1-data access reloaded:Entity Framework（上）

    本章包括以下几个部分: 1.DataSet and classic ADO.NET approach2.Object model approach3.Object/relational mismatc ...

  6. 初识 flask

    1,Python现阶段三大主流web框架Django, Tornado, Flask对比 Django主要特点是大而全,集成了很多组件,列如:Models Admin Form等等,不管用得用不着反正 ...

  7. git 团队代码管理交流共同进步

    Installation methods for GitLab | GitLab https://about.gitlab.com/installation/#centos-7 gittutorial ...

  8. 临时表 数据在 内存 转移时间 将160秒的创建临时表时间放入定时任务 不到1秒的求和时间 hadoop 引入Hadoop 分布式计算

    SELECT SUM(pv) as pv_t  FROM 行 112247817表类型 InnoDB自动递增值 1082428327行格式  Compact索引长度 8.60 GB (9,235,93 ...

  9. java操作CMD命令

    import java.io.InputStream; import java.io.OutputStream; import java.io.PrintWriter; public class CM ...

  10. YTU 2837: 编程题B-狐狸算卦

    2837: 编程题B-狐狸算卦 时间限制: 1 Sec  内存限制: 128 MB 提交: 76  解决: 52 题目描述 注:本题只需要提交需要完善部分的代码,请按照C++方式提交. 小熊和狐狸是邻 ...