我正在做一項大學作業，我使用 PHP 類生成表值，然后 Javascript 函式使用搜索欄進行搜索。它建立在使用相同搜索欄搜索無序串列的先前分配的基礎上。它對串列很有效，但它使用了一個已經提供給我的函式，坦率地說，我不知道它是如何作業的。現在，一旦我添加了一個包含多個單元格的表格行，它所做的就是搜索第一個單元格。它仍然回傳整行，但我也需要它來搜索整行。
似乎a = tr[i].getElementsByTagName("a")[0];只回傳第一個<a>，這可能是問題所在，但我不知道如何在不破壞函式的情況下修復它。
讓我困惑的功能如下。我在其中添加了自己的代碼來隱藏顯然我理解的串列/表格。我不會包括那個，但這就是為什么你沒有看到我關閉這個功能，這樣你就不會對此感到困惑。
function myFunction() {
var input, filter, table, tr, a, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i ) {
a = tr[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
作為參考，這是我為測驗添加的多單元格表行，現在給我帶來了問題。我還包括實際的搜索欄本身，因為它包含用于解釋功能的相關語法。還有其他行，因此該表稍后會關閉。
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name"> <!--This is my search bar-->
<table id="myTable" onload="hideList()">
<tbody>
<tr id="1">
<?php
$pr0 = new productRow(0);
echo
"<td><a href=\"#\">" . $pr0->itemNumber . "</td></a>" .
"<td><a href=\"#\">" . $pr0->name . "</td></a>" .
"<td><a href=\"#\">" . $pr0->type . "</td></a>" . //These rows concatenate the class instances with the elements in which they are supposed to appear
"<td><a href=\"#\">" . $pr0->model . "</td></a>" .
"<td><a href=\"#\">" . $pr0->brand . "</td></a>" .
"<td><a href=\"#\">" . $pr0->description . "</td></a>";
?>
</tr>
我將包含 PHP 類，這樣您就可以看到它是如何輸入內容的，但別擔心，它可以作業。
<?php
class productRow {
var $itemNumber = [];
var $name = [];
var $type = [];
var $model = [];
var $brand = [];
var $description = [];
function __construct($i) { //receives argument when class is called with an argument
$this->itemNumber = $this->make_table_row($i)[0];
$this->name = $this->make_table_row($i)[1];
$this->type = $this->make_table_row($i)[2];
$this->model = $this->make_table_row($i)[3]; //This function allows the instance values of the attributes to be taken from the make_table_row function
$this->brand = $this->make_table_row($i)[4];
$this->description = $this->make_table_row($i)[5];
}
function make_table_row($i) { //receives argument when class is called with an argument
$row = 1;
$tablerows = [];
if (($input = fopen("input.csv", "r")) !== FALSE) { //gets the CSV with my table data
while (($tabledata = fgetcsv($input, 1000, ",")) !== FALSE) { //cycles through the rows of data creating arrays
if ($row == 1) {
$row ;
continue; //skips the first row because it's a header row I don't want on my input
}
$tablerows[] = $tabledata; //uses the roles to populate a multidimensional array
$row ;
}
fclose($input);
if (isset($tablerows[$i])) {
return $tablerows[$i]; //uses argument to return the appropriate array
}
}
}
}
?>
誰能闡明這里發生了什么以及如何在<a>不破壞功能的情況下獲得所有元素？
uj5u.com熱心網友回復：
所以我最終自己弄清楚了。事實證明，因為我不認識 MDN 檔案中的一些術語，所以我閱讀的有關該indexOf()方法的檔案是針對不同型別的引數的。所以a = tr[i].getElementsByTagName("a")[0];只回傳當前迭代行的第一個標記，該標記用于txtValue回傳textContentor的字串，innerText并將txtValue.toUpperCase().indexOf(filter)這些字串的大寫與帶有引數的輸入的大寫值進行比較filter，切換 if-else 陳述句在當前迭代的行上隱藏或顯示該行。
我意識到tr[i]，它來自table.getElementsByTagName("tr")并且將使用當前迭代的標簽并將其[i]定位在陣列上，它只是為節點提供一個標簽，該節點正被用于tr[i].getElementsByTagName("a")[0]獲取在那里回傳的標簽的行。所以我意識到如果我只是單獨使用tr[i]它，它會給我整行而不是第一a行。像魅力一樣作業。
function myFunction() {
var input, filter, table, tr, a, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i ) {
a = tr[i];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/463718.html
標籤：javascript html 数组 循环 if 语句