<!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. MySQL基础笔记（六） 存储过程与函数

    写在开头:本文所有的示例都是基于workers表,表中保存了某公司的员工姓名.性别.工资.年龄和居住城市,如下: +----+-----------+--------+--------+------+ ...

  2. Web安全漏洞及攻击

    背景介绍 先说一个在互联网上常见,但是普通人又不太理解的东西--“验证码”. 验证码(CAPTCHA)是“Completely Automated Public Turing test to tell ...

  3. mingw在Dos下升级gnu编译器版本

    在dos窗口下输入: mingw-get update mingw-get upgrade gfortran gcc g++ 强烈建议卸载后再安装新版本

  4. UVa 10773 - Back to Intermediate Math

    题目:渡河问题.给你河水宽度,水流速度,求垂直渡河与最快渡河的时间差. 分析:物理题,数学题. 最快渡河情况,传垂直运动,垂直渡河,船的水平分速度和水流速度抵消. 说明:注意水流速度不能为0. #in ...

  5. 【iOS系列】-UIButton的非常规使用

    [iOS系列]-UIButton的非常规使用 主要介绍UIButton在开发中得小技巧,使用好了,可以达到很奇妙的效果. 1:设置按钮内边距属性,可以呈现出相框的效果 btn.contentEdgeI ...

  6. Boost中的Timer的使用——计算时间流逝

    使用Boost中的Timer库计算程序的运行时间 程序开发人员都会面临一个共同的问题,即写出高质量的代码完毕特定的功能.评价代码质量的一个重要标准就是算法的运行效率,也就是算法的运行时间.为了可靠的提 ...

  7. CAS和ABA

    1 CAS compare and swap的缩写,详见乐观锁和悲观锁. 2 ABA 就是说,我获取的旧值是A,然后被人修改成了B,但是又被人修改成了A,我就认为并没有修改,更新内存. 解决办法,给每 ...

  8. Adding Security to an Existing Website

    The procedure earlier in this article relies on using the Starter Site template as the basis for web ...

  9. ELF和a.out文件格式的比较

    本文讨论了 UNIX/LINUX 平台下三种主要的可执行文件格式:a.out(assembler and link editor output 汇编器和链接编辑器的输出).COFF(Common Ob ...

  10. Java中去除字符串中的所有空格

    JAVA中去掉空格     1. String.trim()    trim()是去掉首尾空格         2.str.replace(" ", ""); ...