如何通過TD內容

Question

期望的行爲

顯示基於搜索中的所有表的前兩列匹配過濾多個表或隱藏表（全表，而不是表單元格） - 如果有匹配的<tr>的第一個或第二個<td>，顯示該表，否則隱藏該表。

我已經試過

jsFiddle

$("input").on("keyup", function() { 
 
    var matcher = new RegExp($(this).val(), "gi"); 
 
    $(".my_table") 
 
    .hide() 
 
    .filter(function() { 
 
     return matcher.test($(this).find("td").text()); 
 
    }) 
 
    .show(); 
 
});

table { 
 
    font-family: arial, sans-serif; 
 
    border-collapse: collapse; 
 
    width: 50%; 
 
} 
 

 
td, 
 
th { 
 
    border: 1px solid #dddddd; 
 
    text-align: left; 
 
    padding: 8px; 
 
} 
 

 
tr:nth-child(even) { 
 
    background-color: #dddddd; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input type="text"> 
 

 
<table class="my_table"> 
 
    <thead> 
 
    <tr> 
 
     <th> 
 
     First Name 
 
     </th> 
 
     <th>Last Name</th> 
 
     <th>Text</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>David</td> 
 
     <td>Johnman</td> 
 
     <td>Here is some text</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Felix</td> 
 
     <td>Mann</td> 
 
     <td>Cake</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Peter</td> 
 
     <td>Pan</td> 
 
     <td>Green green grass of home</td> 
 
    </tr> 
 
</table> 
 

 
<br><br> 
 

 
<table class="my_table"> 
 
    <thead> 
 
    <tr> 
 
     <th> 
 
     First Name 
 
     </th> 
 
     <th>Last Name</th> 
 
     <th>Text</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>David</td> 
 
     <td>Stone</td> 
 
     <td>Here is text</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Trevor</td> 
 
     <td>Barry</td> 
 
     <td>Cake</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Xylophone</td> 
 
     <td>Greet</td> 
 
     <td>Green green grass of home</td> 
 
    </tr> 
 
</table>

不反對把班前兩個表格單元格每一行是否有幫助目標搜索，只是不完全確定如何定位正在過濾的表的實例。

最終我想在輸入3個字符後開始過濾，因此可能將代碼包裝在輸入長度的條件檢查中，並在輸入長度爲0（退格內容後）時顯示所有表格。

Answer 1

您可以限制搜索到的:first-child和老二（:nth-child(2)）或 -ed在一起：

return matcher.test($(this).find("td:first-child,td:nth-child(2)").text()); 

---

或者，正如你所說，你可以添加一個類第一兩個td，例如searchable，並將查詢字符串細化爲td.searchable。

Answer 2

只要發佈解決方案，我最終開發的程序即使與接受的答案不同（因爲它向不同的方向移動），以防其他方法幫助其他人。這不是精益或優化，但這可能有助於他人看到邏輯的不同「部分」。

它根據搜索輸入（最少3個字符）過濾表格並突出顯示匹配的文本。它僅匹配每個<tr>的前兩個<td>中的內容 - 第一個單元格與內容的開頭匹配，第二個單元格與內容中的任何位置匹配。

function search_tds(input_val) { 
 
    $("table").each(function() { 
 
    var match_counter = 0; 
 

 
    // instance of table 
 
    var $this = $(this); 
 
    // first and second cells in each row 
 
    var $tds = $this.find("td:nth-child(1),td:nth-child(2)"); 
 

 
    $tds.each(function(ind, val) { 
 
     var cell = $tds[ind]; 
 
     var cell_text = cell.innerText; 
 

 
     // if the first cell, perform check at start of string 
 
     if ($(this).is(":nth-child(1)")) { 
 
     var is_at_start_of_string = 
 
      cell_text.toLowerCase().indexOf(input_val.toLowerCase()) === 0; 
 
     // remove span tags to remove 'history' state 
 
     // ie if there was existing match and then pasted in 
 
     // another matching value 
 
     if (is_at_start_of_string === false) { 
 
      cell.innerHTML = cell.innerText; 
 
     } 
 
     } else if ($(this).is(":nth-child(2)")) { 
 
     // if the second cell, perform check anywhere in string 
 
     var exists_in_string = 
 
      cell_text.toLowerCase().indexOf(input_val.toLowerCase()) !== -1; 
 
     // remove span tags to remove 'history' state 
 
     // ie if there was existing match and then pasted in 
 
     // another matching value 
 
     if (exists_in_string === false) { 
 
      cell.innerHTML = cell.innerText; 
 
     } 
 
     } 
 

 
     if (is_at_start_of_string === true || exists_in_string === true) { 
 
     match_counter += 1; 
 
     // cell.innerHTML = cell.innerText.replace(
 
     // input_val, 
 
     // '<span class="matched_text">' + input_val + "</span>" 
 
     //); 
 
     // to replace with accurate case, see: 
 
     // https://stackoverflow.com/a/3294644/1063287 
 
     var reg = new RegExp(input_val, 'i'); 
 
     cell.innerHTML = cell.innerText.replace(reg, '<span class="matched_text">$&</span>'); 
 
     } 
 
    }); 
 

 
    if (match_counter > 0) { 
 
     $(this).css("display", "table"); 
 
    } else { 
 
     $(this).css("display", "none"); 
 
    } 
 
    }); 
 
} 
 

 
$(document).on("keyup", "input", function() { 
 
    var input_val = $(this).val(); 
 
    var input_length = input_val.length; 
 
    if (input_length > 2) { 
 
    search_tds(input_val); 
 
    } else if (input_length <= 2) { 
 
    $("table").css("display", "table"); 
 
    $("span").removeClass("matched_text"); 
 
    } 
 
});

table { 
 
    font-family: arial, sans-serif; 
 
    border-collapse: collapse; 
 
    width: 80%; 
 
    table-layout: fixed; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 
td, 
 
th { 
 
    border: 1px solid #000; 
 
    text-align: left; 
 
    padding: 8px; 
 
    width: 33.3%; 
 
} 
 

 
.matched_text { 
 
    background: yellow; 
 
} 
 

 
input { 
 
    padding: 10px; 
 
    width: 80%; 
 
    margin: 10px auto; 
 
    display: block; 
 
    background: #eee; 
 
    color: #505050; 
 
    border: 1px solid #b0b0b0; 
 
    font-size: 20px; 
 
} 
 

 
* { 
 
    box-sizing: border-box; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" placeholder="enter search text (3 characters minimum)..."> 
 

 
<table> 
 

 
    <tbody> 
 
    <tr> 
 
     <td>011010</td> 
 
     <td>best</td> 
 
     <td>this text is not searched zest</td> 
 
    </tr> 
 
    <tr> 
 
     <td>020110</td> 
 
     <td>vest 011010</td> 
 
     <td>this text is not searched jest</td> 
 
    </tr> 
 
    </tbody> 
 

 
</table> 
 

 
<br> 
 

 
<table> 
 

 
    <tbody> 
 
    <tr> 
 
     <td>808080</td> 
 
     <td>Jest</td> 
 
     <td>this text is not searched best</td> 
 
    </tr> 
 
    <tr> 
 
     <td>805601</td> 
 
     <td>Pest</td> 
 
     <td>this text is not searched chest</td> 
 
    </tr> 
 
    </tbody> 
 

 
</table> 
 

 
<br> 
 

 
<table> 
 

 
    <tbody> 
 
    <tr> 
 
     <td>020101</td> 
 
     <td>zest</td> 
 
     <td>this text is not searched vest</td> 
 
    </tr> 
 
    <tr> 
 
     <td>501025</td> 
 
     <td>chesT</td> 
 
     <td>this text is not searched 808080</td> 
 
    </tr> 
 
    </tbody> 
 

 
</table>