如何搜索html表中的列並突出顯示任何匹配

有人可以幫我解決一個代碼片段，它允許我使用輸入到文本中的搜索條件在html表上搜索一列框？這將是一個手機號碼，我希望能夠搜索我在下面提供的表格中的手機號碼TD，並突出顯示任何匹配.....如何搜索html表中的列並突出顯示任何匹配

繼承人我的按鈕和txt框我想調用jquery off點擊按鈕.........

<asp:TextBox ID="txtSearchMobileNumber" runat="server" CssClass="number"></asp:TextBox> 

<asp:button runat="server" id="BtnSearchMobile"\>

我的繼承人表

<code> 
    <table id="HandsetDetails"> 
     <tr> 
      <td> 
      Mobile Phone number 
      </td> 
       <td> 
       Network Provider 
       </td> 
       <td> 
       Amount 
       </td> 
      </tr> 
     </table> 
</code>

來源

2012-03-29 Code Ratchet

你爲什麼要尋找一個HTML表格而不是說，一個表？ – 2012-03-29 16:30:41

，因爲這個HTML表格是由用戶填充的，所以他們可以添加任意數量的行，這個搜索功能將允許用戶搜索任何行以快速找到他們需要修改的數字，如果他們犯了一個錯誤等 – 2012-03-29 16:43:02

使用jQuery的highlight plugin

$("#HandsetDetails").highlight(<your keyword(s)>);

然後只需創建CSS樣式爲您高亮字（詞）：

.highlight { 
    background-color: #FFFF88; 
}

使用高亮與你的HTML：

$('#BtnSearchMobile').click(function() { 
    $("#HandsetDetails").highlight($('#txtSearchMobileNumber').val()); 
});

這使用.click()和.val()

甚至更好的你可以使用DataTables另一個可以根據輸入過濾表的另一個jQuery插件 - 並且加載更多！導出到Excel/PDF等

（注意 - 我不是連接到任何插件 - 只是不願意重新發明輪子）在數據庫

來源

2012-03-29 16:34:43 ManseUK

謝謝非常多的信息，例如，我從來沒有新的有一個突出的插件即時通訊新的Jquery你看，所以我正確地說在（<你的關鍵字（S）>）;會是我的文本框的名稱？ – 2012-03-29 16:38:01

@ScottAtkinson在我的回答中添加了「在您的HTML中使用hightlight」一節 - 應該讓您開始......真的推薦看一下DataTables--過濾會更好地突出顯示屏幕上的某些東西...... – ManseUK 2012-03-29 16:43:47

如何搜索html表中的列並突出顯示任何匹配

回答

相關問題