テーブルの内容を検索しようとしています。以下のコードは、rowspanのない行のフィルターで機能します。しかし、マージされた行のコンテンツを検索すると、期待した出力が得られません。
function myFunction() {
var input, filter, table, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
キーワード「IslandTrading」での検索は機能していますが、「Berglundssnabbkop」での検索では誤った出力が表示されます。
これに関するどんな助けも本当に役に立ちます。
<td>行スパンがある場所に非表示を追加します。
<tr>
<td style="display:none;">Alfreds Futterkiste</td>
<td>Berglunds snabbkop</td>
</tr>
そして更新されたフィドル：https：//jsfiddle.net/0j3defzs/2/
これが発生する理由は、関数がテーブルの最初の列を検索しているが、行をスパンすると、一部の行が前の行の横（下ではなく）に表示されるためです。空tdのsを挿入すると、フィルタリング関数が間違った列を検索することがなくなります。
編集：
テーブルに実際にはすべての行に2つの列がある方が理にかなっていると思いますが、テーブルをまったく変更したくない場合は、次のようなものでも機能します（フィドル：https：//jsfiddle.net/m6cbzrh9/ 1 /）
function myFunction() {
var input, filter, table, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
var show = true;
var spannedRows = 0;
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if(spannedRows > 0) {
if(show)
tr[i].style.display = "";
else
tr[i].style.display = "none";
spannedRows--;
} else if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
let rs = td.getAttribute("rowspan");
console.log("rs = " + rs);
if(rs && rs > 1) {
show = td.innerHTML.toUpperCase().indexOf(filter) > -1;
spannedRows = rs - 1;
}
}
}
}
これは、行スパンが常に複数行の列の最初のセルで定義され、その最初のセルの結果に基づいてすべての行をフィルタリングすることを前提としています。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加