<!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. D广搜

    <span style="color:#330099;">/* D - 广搜 基础 Time Limit:1000MS Memory Limit:30000KB 64b ...

  2. CASE函数 sql server——分组查询(方法和思想) ref和out 一般处理程序结合反射技术统一执行客户端请求 遍历查询结果集，update数据 HBuilder设置APP状态栏

    CASE函数   作用: 可以将查询结果集的某一列的字段值进行替换 它可以生成一个新列 相当于switch...case和 if..else 使用语法: case 表达式/字段 when 值 then ...

  3. 竞赛中经常使用的C++写法

    首先是构造函数,重载 #include <iostream> #include <cstdio> #include <cstring> #include <s ...

  4. 扩展HtmlHelper

    eg3:扩展HtmlHelper                                扩展方法类 1 public static class HtmlExtension 2 { 3 /// ...

  5. URL传参中文乱码的一种解决方法

    中文乱码是由于,发送和接收方使用的编码解码格式不一致导致,以下是关于url传参解决中文乱码的一种方法,最后根据各种编码格式尝试解码,发现正确的解码格式 string strQueryString = ...

  6. 【hadoop】ssh localhost 免密码登陆（图解）

    假设系统中有用户test,属于用户组test, 1. 首先确认能否不输入口令就用ssh登录localhost: $ ssh localhost 输出如下所示: 2. 如果不输入口令就无法用ssh登陆l ...

  7. POJ1236 Network of Schools —— 强连通分量 + 缩点 + 入出度

    题目链接:http://poj.org/problem?id=1236 Network of Schools Time Limit: 1000MS   Memory Limit: 10000K Tot ...

  8. POJ1984 Navigation Nightmare —— 种类并查集

    题目链接:http://poj.org/problem?id=1984 Navigation Nightmare Time Limit: 2000MS   Memory Limit: 30000K T ...

  9. 【Android进度条】三种方式实现自定义圆形进度条ProgressBar

    一.通过动画实现 定义res/anim/loading.xml如下: <?xml version="1.0" encoding="UTF-8"?> ...

  10. Linux系统下安装和使用rz、sz命令

    1.软件安装 1)编译安装 root 账号登陆后,依次执行以下命令: cd /tmp wget http://www.ohse.de/uwe/releases/lrzsz-0.12.20.tar.gz ...