Javascript表格中搜索

?





1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>

    <title></title>

    <script type="text/javascript">

        window.onload = function
() {

            // var str = "avdfklksd";

            //alert(str.search(‘d‘));//找到字符串出现的位置，如果没找到返回-1

            var
oName = document.getElementById("txtname");

            var
oBtn = document.getElementById("btnSearch");

            var
oTab = document.getElementById("tb1");

            oBtn.onclick = function
() {

                for
(i = 0; i < oTab.tBodies[0].rows.length; i++) {

                    var
oStr = oTab.tBodies[0].rows[i].cells[1].innerText.toLocaleLowerCase();

                    var
oText = oName.value.toLocaleLowerCase();

                    if
(oStr.search(oText) != -1) {

                        oTab.tBodies[0].rows[i].style.background = "yellow";

                    }

                    else
{

                        oTab.tBodies[0].rows[i].style.background = "";

                    }

                }

            }

        }

    </script>

</head>

<body>

    <input type="text"
name="txtname"
id="txtname"
/><input type="button"
value="搜索"
id="btnSearch"
/>

    <table id="tb1"
border="1"
style="width: 500px;">

        <thead>

            <tr>

                <td>ID</td>

                <td>姓名</td>

                <td>年龄</td>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>1</td>

                <td>Cupid</td>

                <td>66</td>

            </tr>

            <tr>

                <td>2</td>

                <td>Fly</td>

                <td>45</td>

            </tr>

            <tr>

                <td>3</td>

                <td>Sky</td>

                <td>23</td>

            </tr>

            <tr>

                <td>4</td>

                <td>Windy</td>

                <td>98</td>

            </tr>

            <tr>

                <td>5</td>

                <td>Snow</td>

                <td>09</td>

            </tr>

        </tbody>

    </table>

</body>

</html>

　　

时间： 2024-10-30 07:39:48

Javascript表格中搜索的相关文章

Jquery在表格中搜索关键字

<!DOCTYPE html><html><head> <title>ddd</title></head><body><table border="1"> <thead> <tr colspan="3"> <input type="text" id="filtertxt"> <input t

javascript如何便利表格中的行和单元格

javascript如何便利表格中的行和单元格:尽管现在普遍使用div布局来替代表格,这并不说明table是一无是处的,在制作表格类型的结构的时候还是使用table更为有效.在实际应用中有时候需要便利表格中的行和单元格,下面就通过实例简单介绍一下如何实现此功能.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author&quo

JavaScript基础 使用for循环 获得一个表格中所有行的id值

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

JavaScript基础 rows,cells 得到表格中所有单元格的内容

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

在DOM中搜索元素

方法 现代浏览器中使用XPath document.getElementById document/node.getElementsByTagName Limit search by parent element document.getElementsByName document/node.getElementsByClassName document/node.querySelector, querySelectorAll 实践 标签链接 显示子节点数量 更多 总结 大部分时间里,为了与用

表格的搜索

可以实现模糊搜索,多项搜索,准确搜索,大小写通用搜索(删除菜单没有添加事件) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head

C#中导出数据到Excel表格中

之前PM交给我一个自动化测试的Case,让我抓取页面上的数据到Excel表格中,刚好又接了一个之前人家做的系统, 刚好看到可以用NPOI导数据,就动手试试,成功导出. 由于鄙人比较菜,也比较懒, 怕自己忘记了,今天就总结一下,以防下次用可以参考. 1.要使用NPOI,首先需要在Project中Install NPOI的 Package. 右键点击Project------>Manage NuGet Packages---->Search NPOI----->点击搜索到的NPOI然后点击等

实用篇：说说我在JavaScript项目中使用的工具类

在JavaScript的开发中,我们都会写一些工具类来帮我们简化一些业务操作的逻辑,一下就貼几个我在项目开发过程中常用的工具类.表达能力有限,各位看官还是看源码吧. 一.日期处理工具类. /** * 日期处理工具类 * @Authors: jackyWHJ * @date 2013-10-18 * */ var DateUtils = { /** * 得到日期在一年当中的周数 */ getISOYearWeek: function(date) { var commericalyear = thi

将文本框内容添加到表格中的行代码实例

将文本框内容添加到表格中的行代码实例:在实际操作中,往往需要将文本框中的内容添加到表格的行中或者类似的情况,下面就通过一个实例介绍一下如何实现此效果,希望能够对需要的朋友有所帮助,代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/&