键控函数的Javascript问题-多次尝试在页面上使用相同的表单字段，但只有第一个表单字段有效 我在同一个html页面上有多个词汇表 在每个词汇表上方，我希望使用户能够在字段中输入单词或短语，以便仅查看包含输入单词或短语的表行。例如，如果输入“orde”，则不包含字符串“orde”的表行将消失。如果您访问，请单击“Vocabulario（官方y de jerga）-palabras y frases comunes”展开手风琴部分，然后在“Ingresa palabras o frase en el siguiente campo para filter la información de la tabla”下方的字段中输入“orde”。输入“orde”后，词汇表中除2行外的所有行都应消失（保留2行） 我有两个问题。我遇到的第一个问题是，我无法重复页面上每个词汇表上方的表单字段，因为只有表单字段的第一次出现才起作用。我遇到的第二个问题是，我希望表单字段仅应用于它正下方的表的所有行。当前，表单字段应用于页面上所有表的所有行，这些表的类为“myTable”。也许我可以为每个表指定一个表id，然后让表上方的表单字段仅应用于表单字段正下方的表id。而且，在不必添加太多javascript或其他css类的情况下实现这一点将是非常好的（最好，我希望避免添加更多css类）。我猜想，这两个问题都可以通过额外的几行javascript来解决，可能还可以为每个表添加一个一致格式的表id（例如filter1、filter2、filter3） 下面是（a）在我的html中显示的表单字段；（b） 在我的html中显示的打开表标记的示例；（c）我正在使用的javascript 我不是一名软件工程师，但如果有人告诉我具体要做什么，我确实知道如何实施更改（例如，进行这个精确的更改，然后进行这个精确的更改，然后进行这个精确的更改）。我感谢任何人能提供的帮助，特别是文字说明

（a）表单字段从这里开始

<form class="live-search" action="" method="post">
<p>Ingresa palabra o frase en el siguiente campo para filtrar la información de la tabla</p>
<input id="filter" class="text-input" type="text" value="Mostrar sólo filas que contengan..." onFocus="clearText(this)" onBlur="clearText(this)" />
</form>

<table class="myTable" summary="Palabras y frases (oficiales y de jerga)">

$(document).ready(function(){
$("#filter").keyup(function(){

// Retrieve the input field text and reset the count to zero
var filter = $(this).val(), count = 0;

// Loop through the comment list
$('table[class="myTable"] tr').each(function(){

// If the list item does not contain the text phrase fade it out
if ($(this).text().search(new RegExp(filter, "i")) < 0) {
$(this).fadeOut();

// Show the list item if the phrase matches and increase the count by 1
} else {
$(this).show();
count++;
}
});

// Update the count
var numberItems = count;
$("#filter-count").text(" Total = "+count);
});
});

<form class="live-search" action="" method="post">
<p>Ingresa palabra o frase en el siguiente campo para    filtrar la información de la tabla</p>
<input class="input-text" type="text" value="Mostrar sólo    filas que contengan..." />
<span class="filter-count"></span>
</form>

<table class="myTable" summary="Palabras y frases (oficiales y de jerga)">

.live-search {
overflow: hidden; 
width: 100%; 
padding: 8px 0; 
border: 0px solid #e3e3e3; 
margin-bottom: 10px;
font-size: 12px;
color: rgb(61, 61, 61) !important;
}

.live-search input {
border:1px solid #ddd;
padding:5px 8px;
width:300px; 
font-size: 12px;
color: rgb(61, 61, 61) !important;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}

.live-search input:focus {
border-color: #c3c3c3;
-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
box-shadow: 0 0 3px rgba(0,0,0,.2);     
}

$(function() {
$(".input-text").keyup(function() {
var $this = $(this),
count = 0,
pattern = new RegExp($this.val(), "i"),
$group = $this.closest(".group"),
$count = $group.find(".filter-count");
$group.find(".myTable tr").each(function() {
$tr = $(this);
if ($tr.text().search(pattern) < 0) {
$tr.fadeOut();
} else {
$tr.show();
count++;
}
$count.text("(" + count + ")")
});
}).on('focus blur', function() {
if (this.defaultValue == this.value) this.value = '';
else if (this.value == '') this.value = this.defaultValue;
});
});

（c）css在此结束

<form class="live-search" action="" method="post">
<p>Ingresa palabra o frase en el siguiente campo para filtrar la información de la tabla</p>
<input id="filter" class="text-input" type="text" value="Mostrar sólo filas que contengan..." onFocus="clearText(this)" onBlur="clearText(this)" />
</form>

<table class="myTable" summary="Palabras y frases (oficiales y de jerga)">

$(document).ready(function(){
$("#filter").keyup(function(){

// Retrieve the input field text and reset the count to zero
var filter = $(this).val(), count = 0;

// Loop through the comment list
$('table[class="myTable"] tr').each(function(){

// If the list item does not contain the text phrase fade it out
if ($(this).text().search(new RegExp(filter, "i")) < 0) {
$(this).fadeOut();

// Show the list item if the phrase matches and increase the count by 1
} else {
$(this).show();
count++;
}
});

// Update the count
var numberItems = count;
$("#filter-count").text(" Total = "+count);
});
});

<form class="live-search" action="" method="post">
<p>Ingresa palabra o frase en el siguiente campo para    filtrar la información de la tabla</p>
<input class="input-text" type="text" value="Mostrar sólo    filas que contengan..." />
<span class="filter-count"></span>
</form>

<table class="myTable" summary="Palabras y frases (oficiales y de jerga)">

.live-search {
overflow: hidden; 
width: 100%; 
padding: 8px 0; 
border: 0px solid #e3e3e3; 
margin-bottom: 10px;
font-size: 12px;
color: rgb(61, 61, 61) !important;
}

.live-search input {
border:1px solid #ddd;
padding:5px 8px;
width:300px; 
font-size: 12px;
color: rgb(61, 61, 61) !important;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}

.live-search input:focus {
border-color: #c3c3c3;
-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
box-shadow: 0 0 3px rgba(0,0,0,.2);     
}

$(function() {
$(".input-text").keyup(function() {
var $this = $(this),
count = 0,
pattern = new RegExp($this.val(), "i"),
$group = $this.closest(".group"),
$count = $group.find(".filter-count");
$group.find(".myTable tr").each(function() {
$tr = $(this);
if ($tr.text().search(pattern) < 0) {
$tr.fadeOut();
} else {
$tr.show();
count++;
}
$count.text("(" + count + ")")
});
}).on('focus blur', function() {
if (this.defaultValue == this.value) this.value = '';
else if (this.value == '') this.value = this.defaultValue;
});
});

（d）javascript从这里开始

<form class="live-search" action="" method="post">
<p>Ingresa palabra o frase en el siguiente campo para filtrar la información de la tabla</p>
<input id="filter" class="text-input" type="text" value="Mostrar sólo filas que contengan..." onFocus="clearText(this)" onBlur="clearText(this)" />
</form>

<table class="myTable" summary="Palabras y frases (oficiales y de jerga)">

$(document).ready(function(){
$("#filter").keyup(function(){

// Retrieve the input field text and reset the count to zero
var filter = $(this).val(), count = 0;

// Loop through the comment list
$('table[class="myTable"] tr').each(function(){

// If the list item does not contain the text phrase fade it out
if ($(this).text().search(new RegExp(filter, "i")) < 0) {
$(this).fadeOut();

// Show the list item if the phrase matches and increase the count by 1
} else {
$(this).show();
count++;
}
});

// Update the count
var numberItems = count;
$("#filter-count").text(" Total = "+count);
});
});

<form class="live-search" action="" method="post">
<p>Ingresa palabra o frase en el siguiente campo para    filtrar la información de la tabla</p>
<input class="input-text" type="text" value="Mostrar sólo    filas que contengan..." />
<span class="filter-count"></span>
</form>

<table class="myTable" summary="Palabras y frases (oficiales y de jerga)">

.live-search {
overflow: hidden; 
width: 100%; 
padding: 8px 0; 
border: 0px solid #e3e3e3; 
margin-bottom: 10px;
font-size: 12px;
color: rgb(61, 61, 61) !important;
}

.live-search input {
border:1px solid #ddd;
padding:5px 8px;
width:300px; 
font-size: 12px;
color: rgb(61, 61, 61) !important;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}

.live-search input:focus {
border-color: #c3c3c3;
-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
box-shadow: 0 0 3px rgba(0,0,0,.2);     
}

$(function() {
$(".input-text").keyup(function() {
var $this = $(this),
count = 0,
pattern = new RegExp($this.val(), "i"),
$group = $this.closest(".group"),
$count = $group.find(".filter-count");
$group.find(".myTable tr").each(function() {
$tr = $(this);
if ($tr.text().search(pattern) < 0) {
$tr.fadeOut();
} else {
$tr.show();
count++;
}
$count.text("(" + count + ")")
});
}).on('focus blur', function() {
if (this.defaultValue == this.value) this.value = '';
else if (this.value == '') this.value = this.defaultValue;
});
});

$（函数（）{
$（“.input text”）.keyup（函数（）{
变量$this=$（this），
计数=0，
pattern=newregexp（$this.val（），“i”），
$group=$this.closest（“.group”），
$count=$group.find（“.filter count”）；
$group.find（“.myTable tr”）。每个（函数（）{
$tr=$（本）；
如果（$tr.text（）.search（pattern）<0）{
$tr.fadeOut（）；
}否则{
$tr.show（）；
计数++；
}
$count.text（“+count+”）
});
}).on（'focus blur'，function（）{
如果（this.defaultValue==this.value）this.value=''；
如果（this.value=''）this.value=this.defaultValue，则为else；
});
});

---

（d）javascript在这里结束

这里的技巧是相对于当前接收文本的输入元素工作

<form class="live-search" action="" method="post">
<p>Ingresa palabra o frase en el siguiente campo para filtrar la información de la tabla</p>
<input id="filter" class="text-input" type="text" value="Mostrar sólo filas que contengan..." onFocus="clearText(this)" onBlur="clearText(this)" />
</form>

<table class="myTable" summary="Palabras y frases (oficiales y de jerga)">

$(document).ready(function(){
$("#filter").keyup(function(){

// Retrieve the input field text and reset the count to zero
var filter = $(this).val(), count = 0;

// Loop through the comment list
$('table[class="myTable"] tr').each(function(){

// If the list item does not contain the text phrase fade it out
if ($(this).text().search(new RegExp(filter, "i")) < 0) {
$(this).fadeOut();

// Show the list item if the phrase matches and increase the count by 1
} else {
$(this).show();
count++;
}
});

// Update the count
var numberItems = count;
$("#filter-count").text(" Total = "+count);
});
});

<form class="live-search" action="" method="post">
<p>Ingresa palabra o frase en el siguiente campo para    filtrar la información de la tabla</p>
<input class="input-text" type="text" value="Mostrar sólo    filas que contengan..." />
<span class="filter-count"></span>
</form>

<table class="myTable" summary="Palabras y frases (oficiales y de jerga)">

.live-search {
overflow: hidden; 
width: 100%; 
padding: 8px 0; 
border: 0px solid #e3e3e3; 
margin-bottom: 10px;
font-size: 12px;
color: rgb(61, 61, 61) !important;
}

.live-search input {
border:1px solid #ddd;
padding:5px 8px;
width:300px; 
font-size: 12px;
color: rgb(61, 61, 61) !important;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}

.live-search input:focus {
border-color: #c3c3c3;
-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
box-shadow: 0 0 3px rgba(0,0,0,.2);     
}

$(function() {
$(".input-text").keyup(function() {
var $this = $(this),
count = 0,
pattern = new RegExp($this.val(), "i"),
$group = $this.closest(".group"),
$count = $group.find(".filter-count");
$group.find(".myTable tr").each(function() {
$tr = $(this);
if ($tr.text().search(pattern) < 0) {
$tr.fadeOut();
} else {
$tr.show();
count++;
}
$count.text("(" + count + ")")
});
}).on('focus blur', function() {
if (this.defaultValue == this.value) this.value = '';
else if (this.value == '') this.value = this.defaultValue;
});
});

说明：

• 将文本输入字段修改为
  ，并添加到所有其他相关组。这些字段不需要包装在
  标记中，除非表单用于其他用途
• 将

  0

  （或类似内容）添加到所有相关组。此元素将接收

  计数

  统计信息
• 删除函数clearText
• 将javascript修改为如下所示：

:

---

您可以尝试

.fadeOut（）

，但我个人更喜欢使用

.hide（）

，这里的技巧是相对于当前接收文本的输入元素工作

说明：

• 将文本输入字段修改为
  ，并添加到所有其他相关组。这些字段不需要包装在
  标记中，除非表单用于其他用途
• 将

  0

  （或类似内容）添加到所有相关组。此元素将接收

  计数

  统计信息
• 删除函数clearText
• 将javascript修改为如下所示：

:

---

您可以尝试

.fadeOut（）

，但我个人更喜欢使用

.hide（）

页面上每个元素的“id”必须是唯一的。如果您真的将所有这些独立的

元素称为“过滤器”，那么这就是您的问题所在。你可以给他们一个“类”值。谢谢你，尖头。嗯，我不知道该如何实现。如果我理解正确，我可以使每个输入id都是唯一的（例如，输入id=“filter1”，输入id=“filter2”，输入id=“filter3”），但不确定javascript文件中当前似乎需要对每个输入id=“filter”进行哪些更改。此外，如果成功，这将解决上述第3条中的第一个问题，但不会解决上述第3条中的第二个问题。页面上每个元素的“id”必须是唯一的。如果您真的将所有这些独立的

元素称为“过滤器”，那么这就是您的问题所在。你可以给他们一个“类”值。谢谢你，尖头。嗯，我不知道该如何实现。如果我理解正确，我可以使每个输入id都是唯一的（例如，输入id=“filter1”，输入id=“filter2”，输入id=“filter3”），但不确定javascript文件中当前似乎需要对每个输入id=“filter”进行哪些更改。此外，如果成功，这将解决上述第3条中的第一个问题，但不会解决上述第3条中的第二个问题。谢谢你，贝特鲁特。我很快会尝试一下，回头再问：成功与否。甜菜根，谢谢。我尝试了你建议的更改。除非我弄错了，否则您建议的更改会导致4个小错误。我在上面的原始问题中添加了这些bug的摘要。摘要从“甜菜根建议变化的分析从这里开始”开始。非常感谢你的邀请