Javascript 单个列搜索（文本输入）

我试图为每个表列添加一个单独的搜索框，但没有成功。 下面的代码应该添加什么才能使其正常工作

目前我的代码只包含第一列的单个搜索框

请运行代码段以获取完整详细信息

函数myFunction（）{
var输入、过滤器、表格、tr、td、i、TXT值；
输入=document.getElementById（“myInput”）；
filter=input.value.toUpperCase（）；
table=document.getElementById（“myTable”）；
tr=table.getElementsByTagName（“tr”）；
对于（i=0；i-1）{
tr[i].style.display=“”；
}否则{
tr[i].style.display=“无”；
}
}
}
}

p.a{
空白：nowrap；
}
氢{
文本对齐：居中；
字体系列：Helvetica、Arial、无衬线字体；
}
桌子{
左边距：自动；
右边距：自动；
}
表，th，td{
边框：1px纯黑；
边界塌陷：塌陷；
}
th，td{
填充物：5px；
文本对齐：左对齐；
字体系列：Helvetica、Arial、无衬线字体；
字体大小：90%；
空白：nowrap；
}
表tbody tr：悬停{
背景色：#dddddd；
}
.宽{
宽度：90%；
}

这里的标题
钥匙
德夫列夫台阶
WW32
第33次世界大战
第34次世界大战
第35次世界大战
第36次世界大战
WW37
WW38
第39次世界大战
WW40
统治
链接
0
弗斯特
A.
-0.64
6.47
23.14
3.51
0.13
-0.41
-0.59
-0.31
33.13
A.
古戈尔
1.
第二
B
-18.04
-18.42
-17.44
-16.35
-19.06
-17.49
-18.62
-17.92
-18.23
C
亚马逊网站
2.
第三
C
楠
楠
-0.59
2.25
-0.33
0.55
-0.53
8.96
17.53
B
易趣网
3.
第四
A.
-0.18
3.25
7.63
1.90
-0.19
0.41
0.15
0.20
17.31
A.
雅虎网站
4.
第四
A.
0.24
-3.25
-6.42
-1.51
0.60
-0.01
0.25
-0.02
-15.13
A.
MSN.com
5.
弗斯特
D
楠
楠
楠
楠
5.06
楠
1.27
-0.56
13.24
A.
古戈尔

如果您只想显示与所有输入的筛选值匹配的行，那么最好在每次更改时循环所有输入字段，这是最容易处理的

我在这里将输入字段插入表格标题单元格，然后使用

getElementsByTagName

简单地选择它们-您可以将其更改为不同的位置和/或使用不同的方法来选择它们（例如，可能按类），然后可能需要一些轻微的调整

请注意，在这两个循环中，我是如何从索引1开始的，而不是从0开始的——忽略

I

循环中的第一个表行（因为标题行不应该消失；可以通过仅选择tbody中要开始的行来进行不同的操作），并忽略

j

循环中的第一个单元格。因为输入字段的数量比每行的单元格数量少一个，所以我使用索引

j-1

访问输入，得到与单元格索引对应的一个

这可能在一些地方留下了改进的余地，但应该足以说明基本原则

函数myFunction（）{
var输入，表格，tr，i，j，inputValue，txtValue，showRow；
输入=document.getElementsByTagName（“输入”）；
table=document.getElementById（“myTable”）；
tr=table.getElementsByTagName（“tr”）；
对于（i=1；i

p.a{
空白：nowrap；
}
氢{
文本对齐：居中；
字体系列：Helvetica、Arial、无衬线字体；
}
桌子{
左边距：自动；
右边距：自动；
}
桌子
th，
运输署{
边框：1px纯黑；
边界塌陷：塌陷；
}
th，
运输署{
填充物：5px；
文本对齐：左对齐；
字体系列：Helvetica、Arial、无衬线字体；
字体大小：90%；
空白：nowrap；
}
表tbody tr：悬停{
背景色：#dddddd；
}
.宽{
宽度：90%；
}

这里的标题

钥匙

德夫列夫台阶

WW32

第33次世界大战

第34次世界大战

第35次世界大战

第36次世界大战

WW37

WW38

第39次世界大战

WW40

统治

链接
0
弗斯特
A.
-0.64
6.47
23.14
3.51
0.13
-0.41
-0.59
-0.31
33.13
A.
古戈尔
1.
第二
B
-18.04
-18.42
-17.44
-16.35
-19.06
-17.49
-18.62
-17.92
-18.23
C
亚马逊网站
2.
第三
C
楠
楠
-0.59
2.25
-0.33
0.55
-0.53
8.96
17.53
B
易趣网
3.
第四
A.
-0.18
3.25
7.63
1.90
-0.19
0.41
0.15
0.20
17.31
A.
雅虎网站
4.
第四
A.
0.24
-3.25
-6.42
-1.51
0.60
-0.01
0.25
-0.02
-15.13
A.
MSN.com