- 同じ html ページに複数の語彙テーブルがあります。
- 各語彙テーブルの上で、ユーザーがフィールドに単語またはフレーズを入力して、入力した単語またはフレーズを含むテーブル行のみを表示できるようにしたいと考えています。たとえば、「orde」と入力すると、文字列「orde」を含まない表の行が表示されなくなります。http://www.amanado.com/idioma-coombiano/にアクセスし、"Vocabulario (official y de jerga) - palabras y frases comunes" をクリックしてアコーディオン セクションを展開し、"orde" と入力すると、これは既に機能しています。 「Ingresa palabra o frase en el siguiente campo para filtrar la información de la tabla」という言葉の下のフィールドに。「orde」を入力すると、語彙表の 2 行を除くすべてが消えます (2 行が残ります)。
- 私は2つの問題を抱えています。私が抱えている最初の問題は、フォームフィールドの最初の外観のみが機能するため、ページの各語彙テーブルの上にフォームフィールドを繰り返すことができないことです。私が抱えている2番目の問題は、フォームフィールドをそのすぐ下のテーブルのすべての行にのみ適用したいということです。現在、フォーム フィールドは、「myTable」クラスを持つページ上のすべてのテーブルのすべての行に適用されます。おそらく、各テーブルのテーブル ID を指定して、テーブルの上のフォーム フィールドを、フォーム フィールドのすぐ下のテーブルのテーブル ID にのみ適用することができます。そして、JavaScript や追加の css クラスを追加しすぎることなくこれを達成できれば素晴らしいことです (できれば、css クラスを追加することは避けたいと思います)。
- 以下は、(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>
(a) フォームフィールドはここで終了
(b) open table タグはここから始まります
<table class="myTable" summary="Palabras y frases (oficiales y de jerga)">
(b) open table タグがここで終了
(c) JavaScript はここから始まります (ソース: http://www.designchemical.com/blog/index.php/jquery/live-text-search-function-using-jquery/ ; この JavaScript を 1 つ修正して、 class="myTable" を含むテーブルの行にのみ適用されます)
$(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);
});
});
(c) JavaScript はここで終わります
ビートルートが提案する変更の分析はここから始まります
ビートルート、ありがとう。提案された変更を実装しました。その結果、私は 4 つの小さなバグを見つけました。これらはすべて、あなたが既に解決したものよりもはるかに簡単に解決できると思います。＃1と＃2はショーストッパーであり、＃3と＃4は私が扱いやすい. あなたまたは他の誰かが、以下の #1 と #2 のバグを解消する方法を教えてくれれば、それは素晴らしいことです。すでに提供してくださった親切なヘルプに感謝します。
1)1 つまたは一致が見つかった場合、filter-count は正しいです。ただし、入力フィールドをクリアした後、テーブル行の合計数が表示され、この数は正しくありません。表示される数値は「1」～高です。たとえば、この質問の上部にある #2 で提供されている同じ Amanado.com リンクに移動し (Stackoverflow では、新しいユーザーであるため、この質問に別のリンクを追加することはできません)、「Vocabulario」を展開します。 (official y de jerga) - abreviaturas comunes" アコーディオンの場合、"Ingresa palabra o frase en el siguiente campo para filtrar la información de la tabla" という単語の下の入力フィールドに "ap" を入力すると、結果は "2" 行になります。正しい。次に、「ap」を削除して入力フィールドをクリアすると、結果は「19」行になり、これは正しくありません (正しい行数は「Beetroot の提案された変更に 1 つの変更を加えたことに注意してください。これは、外観/美的理由から $count.text(" Total = " + count) を ("(" + count + ")") に変更したことです。これが、この誤ったフィルター数の問題と関係がないことを願っています。Beetroot の提案された変更に 1 つの変更を加えたことに注意してください。これは、外観/美的理由から $count.text(" Total = " + count) を ("(" + count + ")") に変更したことです。これが、この誤ったフィルター数の問題と関係がないことを願っています。
2)入力フィールドに値が入力されると、テーブルのヘッダー行が失われます。ただし、テーブルのヘッダー行は常に表示されている必要があります。上記の #1 に従って、テーブル ヘッダー行が表示されない場合は行数が正しく、テーブル ヘッダー行が存在する場合は行数が正しくない (「1」が多すぎる) ことに注意してください。
3)タグを削除すると、css が失われるか、入力フィールドが正しくありません。以下は私が使用しているcssです。javascriptの「input-text」を「live-search」に、入力欄のclass="input-text"を「live-search」に変更してみましたが、これではcssが復元されないので、これらの変更を削除しました指定したとおりに JavaScript と入力フィールドに戻ります。したがって、タグが削除されたときにcssを機能させることに成功していないため、今のところ、無関係なタグを引き続き使用しています。
4)次のタグに「0」が存在する場合、少なくとも入力フィールドの最初の出現で「0」がページに表示されます。ただし、何も入力されていない場合は「0」があってはなりません。何も入力されていないときに「0」が存在する場合、すべてのテーブル行が表示され、正しいフィルター カウントは、表示されているテーブル行の合計からテーブル ヘッダー行の「1」を引いたものになるため、「0」は正しくない/誤解を招く可能性があります。この問題に対処するために、.
Changed from: <span class="filter-count">0</span>
Changed to: <span class="filter-count"></span>
5)以下は、現在 (a) 入力フィールド、(b) テーブルの開始タグ、(c) css、および (d) Beetroot が提案した変更を行った後に使用している 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 class="input-text" type="text" value="Mostrar sólo filas que contengan..." />
<span class="filter-count"></span>
</form>
(a) 入力フィールドはここで終了
(b) テーブル開始タグはここから始まります
<table class="myTable" summary="Palabras y frases (oficiales y de jerga)">
(b) テーブルの開始タグがここで終了
(c) cssはここから始まる
.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);
}
(c) cssはここで終了
(d) JavaScript はここから始まります
$(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 はここで終了