正在搜索HTML表格

如何使用js實時搜索某個字符串並在4行中顯示結果的搜索功能。谷歌解決方案迄今未成功。正在搜索HTML表格

我有一個有效的解決方案，但我不能讓它在4 行工作這是我到目前爲止有：

function doSearch() { 
    var q = document.getElementById("q"); 
    var v = q.value.toLowerCase(); 
    var rows = document.getElementsByTagName("tr"); 
    var on = 0; 
    for (var i = 0; i < rows.length; i++) { 
    var fullname = rows[i].getElementsByTagName("td"); 
    fullname = fullname[0].innerHTML.toLowerCase(); 
    if (fullname) { 
     if (fullname.indexOf(v)!= -1) { 
     rows[i].style.display = ""; 
     on++; 
     } else { 
     rows[i].style.display = "none"; 
     } 
    } 
    }

來源

2015-10-17 Blueaddiction

你的代碼似乎做的是取出搜索字符串q並隱藏第一列（全名）不包含q的所有行。當第一列爲空時它什麼都不做。你能解釋你想要你的代碼做什麼嗎？ '結果在4'的行不清楚。 – wintvelt

當你將文本框留空時，沒有什麼是應該發生的，基本上我在php頁面上有一個文本框。這個特定頁面生成特定於用戶帳戶的項目。如果他們想要找到他們擁有的特定物品，他們可以使用搜索將其縮小爲他們正在查找的物品。問題是我只想顯示每行4項。我們正在尋找一個html表格，所以所有的東西都已經被設計成水平和垂直的頁面。如果有超過4個搜索結果，那麼它應該在一個新行上顯示下一個項目......基本上每行有4個項目。 – Blueaddiction

我明白了。您問題中的代碼隱藏項目（行或'）。如果你想每行顯示4項，然後轉到下一行，這是你可以用CSS做的事情（特別是flexbox）。如果你可以分享HTML，也會有所幫助。 – wintvelt

從HTML/PHP代碼，它看起來像你的表由行（<tr>）和每行4項（<td>）組成。

您問題中的javascript代碼只檢查每行的第一項，以檢查用戶何時輸入某個搜索查詢。如果搜索項不在該單元中（<td>）隱藏了整行（全部4項）。

如果我正確理解你的問題，你正在尋找一個解決方案，隱藏基於搜索查詢的單個項目，並顯示所有其他項目每行4。

因爲您的原始表已經在表結構中每行4個，所以這不是最有效的解決方案。如果您將一個項目隱藏在一行中，則需要將所有其他項目從一行重新排列到另一行。

我會建議改變你的PHP/HTML來簡單地呈現項目列表。不在HTML代碼中按每4行分組。帶有LI項目列表的簡單UL。

並添加樣式（CSS彈性盒將是我的選擇），以確保項目列表始終整齊地呈現在每行4項（無論是否過濾）。

來源

2015-10-17 22:23:23 wintvelt

真的很感謝你的建議，它的工作表示感謝！ – Blueaddiction

正在搜索HTML表格

回答

相關問題