在頁面中查找HTML並僅顯示相關部分

好吧，標題聽起來有點容易或普遍，但我的問題並不那麼容易。我正在製作一個顯示錶格行中的數據庫的HTML頁面。樣本代碼是：在頁面中查找HTML並僅顯示相關部分

<table> 
<tr><td>ABC Hospitals</td></tr> 
<tr><td>India</td><td>Contact:9999999999</td></tr> 
</table> 

<table> 
<tr><td>XYZ Blood Bank</td></tr> 
<tr><td>NewJersey</td><td>Contact:8888888888</td></tr> 
</table> 

<table> 
<tr><td>ABC Inn</td></tr> 
<tr><td>California</td><td>Contact:7777777777</td></tr> 
</table>

我已經使用表來組數據，其中每個一種含行顯示數據。該代碼給出了以下輸出示例，添加了CSS效果： Image1 - 對不起，我是新用戶，StackOverflow不允許我發佈圖像。

我現在需要'在頁面查找'框來搜索HTML文檔中的特定信息（比如「ABC」）。搜索必須只顯示包含查詢詞（「ABC」）的表，在我們的例子中，隱藏所有其他不包含搜索詞的表。我通過手動編輯HTML實現了示例輸出，以更清楚地顯示我的需求。我需要JScript（或任何適當的）代碼來實現結果： Image2 - 對不起。

我敢肯定這裏有人能夠幫助我，或者爲我提供一些代碼片或指導我一些有用的鏈接。提前致謝。

-Sriram

來源

2015-07-11 Sriram

無論實際問題，有一個看看''和''與元素表格時。 –

你嘗試過什麼嗎？ –

到目前爲止，我可以突出顯示比賽結果，但將表格作爲一個整體進行過濾 - 我不知道如何使用JavaScript來實現這些表格。 – Sriram

var search = document.querySelector('#search'); 
 
var database = document.querySelector('#database'); 
 

 
search.addEventListener('input', function (e) { 
 
    // Every time the input changes, execute filterMatching. 
 
    filterMatching(search.value, database); 
 
}); 
 

 
function filterMatching(value, parent) { 
 
    // Get the parent's children into an array 
 
    var children = [].slice.call(parent.children); 
 
    // Everything is shown by default. 
 
    children.forEach(function removeHiddenFromAll(child) { 
 
     child.classList.remove('hidden'); 
 
    }); 
 
    // Find those who are not matching 
 
    children.filter(function findNonMatching(child) { 
 
     // the toLowerCase() on both ensures the search is not case sensitive. 
 
     return child.textContent.toLowerCase().indexOf(value.toLowerCase()) < 0; 
 
    }) 
 
    // After we found all the non matching, hide them 
 
    .forEach(function hideNonMatching(nonMatching) { 
 
     nonMatching.classList.add('hidden'); 
 
    }); 
 
}

.hidden { 
 
    display: none; 
 
}

<input type="text" id="search" /> 
 
<div id="database"> 
 
    <table> 
 
     <tr> 
 
      <td>ABC Hospitals</td> 
 
     </tr> 
 
     <tr> 
 
      <td>India</td> 
 
      <td>Contact:9999999999</td> 
 
     </tr> 
 
    </table> 
 
    <table> 
 
     <tr> 
 
      <td>XYZ Blood Bank</td> 
 
     </tr> 
 
     <tr> 
 
      <td>NewJersey</td> 
 
      <td>Contact:8888888888</td> 
 
     </tr> 
 
    </table> 
 
    <table> 
 
     <tr> 
 
      <td>ABC Inn</td> 
 
     </tr> 
 
     <tr> 
 
      <td>California</td> 
 
      <td>Contact:7777777777</td> 
 
     </tr> 
 
    </table> 
 
</div>

來源

2015-07-11 12:02:35

你的代碼似乎在代碼段中工作，但不是在我的實際代碼中。我是否正確地將整個JS代碼（第一部分 - 從var search = ...到相應的}）放在標記內？對不起，我還是個學生 – Sriram

沒關係，因爲某些原因，事情不會當元素被存儲爲 '無功' 的工種。所以我修改的代碼略有如下：我創建了一個新功能：

function fn_search(){ 
var phrase = document.querySelector('#search').value; 
filterMatching(phrase, document.querySelector('#database')); 
}

，並呼籲

<input type="text" id="search" oninput="fn_search()" />

程序現在能正常工作。

完整的代碼如下：

<html> 
<head> 
<style> 
table{ 
    padding: 20px; 
    margin: 10px; 
    background: #990030; 
    color: #fff; 
    font-size: 17px; 
    font-weight: bold; 
    line-height: 1.3em; 
    border: 2px dashed #9ff; 
    border-radius: 10px; 
    box-shadow: 0 0 0 4px #990030, 2px 1px 6px 4px rgba(10, 10, 0, 0.5); 
    text-shadow: -1px -1px #aa3030; 
    font-weight: normal; 
table-layout: fixed; 
width: 325px; 
height:75px; 
} 
th, td { 

    overflow: hidden; 
    width: 100px; 
} 
table.hidden { 
    display: none; 
} 
</style> 
</head> 
<body> 
<script> 

function fn_search(){ 
var phrase = document.querySelector('#search').value; 
filterMatching(phrase, document.querySelector('#database')); 
} 

function filterMatching(value, parent) { 
    // Get the parent's children into an array 
    var children = [].slice.call(parent.children); 
    // Everything is shown by default. 
    children.forEach(function removeHiddenFromAll(child) { 
     child.classList.remove('hidden'); 
    }); 
    // Find those who are not matching 
    children.filter(function findNonMatching(child) { 
     // the toLowerCase() on both ensures the search is not case sensitive. 
     return child.textContent.toLowerCase().indexOf(value.toLowerCase()) < 0; 
    }) 
    // After we found all the non matching, hide them 
    .forEach(function hideNonMatching(nonMatching) { 
     nonMatching.classList.add('hidden'); 
    }); 
} 
</script> 
<input type="text" id="search" oninput="fn_search()" /> 
<div id="database"> 
    <table> 
     <tr> 
      <td>ABC Hospitals</td> 
     </tr> 
     <tr> 
      <td>India</td> 
      <td>Contact:9999999999</td> 
     </tr> 
    </table> 
    <table> 
     <tr> 
      <td>XYZ Blood Bank</td> 
     </tr> 
     <tr> 
      <td>NewJersey</td> 
      <td>Contact:8888888888</td> 
     </tr> 
    </table> 
    <table> 
     <tr> 
      <td>ABC Inn</td> 
     </tr> 
     <tr> 
      <td>California</td> 
      <td>Contact:7777777777</td> 
     </tr> 
    </table> 
</div> 
</body> 
</html>

來源

2015-07-11 14:21:33 Sriram

在頁面中查找HTML並僅顯示相關部分

回答

相關問題