突出TD文本搜索與輸入

HTML：突出TD文本搜索與輸入

<input type='text' id='search'> 
<table class='searchtbl'> 
    <tr><th>ID</th><th>DESCRIPTION</th></tr> 
    <tr><td>1</td><td><input type='text' value='FROG'></td></tr> 
    <tr><td>2</td><td><input type='text' value='MOUSE'></td></tr> 
    <tr><td>3</td><td><input type='text' value='CAT'></td></tr> 
</table>

CSS：

.highlighted { 
    background-color: yellow; 
}

我想強調的是包含搜索項的<td>，羯羊它是在td或輸入中，從#search加入.highlighted類到它：

的jQuery：

$("#search").keyup(function() { 
    var data = this.value.toUpperCase().split(" ");  
    $(".searchtbl").find("tr").not("tr:first").find("td").each(function (index, elem) { 
    var $elem = $(elem); 
     for (var d = 0; d < data.length; ++d) { 
      // Highlight 
      if ($elem.text().toUpperCase().indexOf(data[d]) != -1) { 
       $elem.addClass('highlighted'); 
      } else { 
       $elem.removeClass('highlighted'); 
      } 
     } 
    })  
})

出於某種原因，沒有突出的單元格。

https://jsfiddle.net/fabriziomazzoni79/zpaLv4pm/

來源

2016-02-12 Fabrizio Mazzoni

在您面臨的確切問題之外，您可以做出一些小改進。首先用''包裝你的標題行，其他行用''，那麼你可以做'$（。searchtbl）.find（「tbody tr」）''而不需要'.not（「tr：first」）' – freefaller

另外，如果您試圖突出顯示多個項目，那麼您的代碼稍有缺陷。您將基於'data'數組中的每個單獨項添加和刪除類。這意味着如果您添加該類是因爲您已經找到數組中的第一個單詞，那麼如果您不在數組中的第二個單詞中找到該單詞，則會立即將其刪除 – freefaller

你的問題是什麼，該文本不是直接的td元素裏面，但裏面的元素裏面輸入。因此，只需更換：

if ($elem.text().toUpperCase().indexOf(data[d]) != -1) {

與

if ($elem.find('input').length > 0 && 
    $elem.find('input').val().toUpperCase().indexOf(data[d]) != -1) {

https://jsfiddle.net/zpaLv4pm/6/

來源

2016-02-12 08:26:07 KWeiss

約

$("#search").keyup(function() { 
    var data = $(this).val().toUpperCase().split(" "); 
    $(".searchtbl input[type='text']").each(function (i, e) { 
     for (var d = 0; d < data.length; ++d) { 
      // Highlight 
      if ($(this).val().toUpperCase().indexOf(data[d]) != -1) { 
       $(this).closest("td").addClass('highlighted'); 
      } else { 
       $(this).closest("td").removeClass('highlighted'); 
      } 
     } 
    })  
})

來源

2016-02-12 08:25:01 Plebsori

看，這就是工作的代碼，我加入。你的問題是你只在td搜索文本。

但在裏面td你有輸入標籤你忘了搜索。你需要搜索它。

所以我有正確的，請看看這將工作。

可能，這將有助於

$(document).ready(function(e) { 
 
    $("#search").keyup(function() { 
 

 
    if ($(this).val() == "") { 
 
     $(".searchtbl").find("tr").not("tr:first").find("td").removeClass('highlighted'); 
 
     $(".searchtbl").find("tr").not("tr:first").find("td").find(".inputType").removeClass('highlighted'); 
 
     return false; 
 
    } 
 
    var data = this.value.toUpperCase().split(" "); 
 
    $(".searchtbl").find("tr").not("tr:first").find("td").each(function(index, elem) { 
 
     var $elem = $(elem); 
 
     for (var d = 0; d < data.length; ++d) { 
 
     // Highlight 
 
     if ($elem.text().toUpperCase().indexOf(data[d]) != -1) { 
 
      $elem.addClass('highlighted'); 
 
     } else { 
 
      $elem.removeClass('highlighted'); 
 
     } 
 
     //console.log(); 
 

 
     if ($elem.find(".inputType").length == 1) { 
 

 
      if ($elem.find(".inputType").val().toUpperCase().indexOf(data[d]) != -1) { 
 
      $elem.addClass('highlighted'); 
 
      $elem.find(".inputType").addClass('highlighted'); 
 
      } else { 
 
      $elem.removeClass('highlighted'); 
 
      $elem.find(".inputType").removeClass('highlighted'); 
 
      } 
 
     } 
 

 
     } 
 
    }) 
 
    }) 
 
});

.highlighted { 
 
    background-color: yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type='text' id='search'> 
 
<table class='searchtbl'> 
 
    <tr> 
 
    <th>ID</th> 
 
    <th>DESCRIPTION</th> 
 
    </tr> 
 
    <tr> 
 
    <td>1</td> 
 
    <td> 
 
     <input type='text' value='FROG' class="inputType"> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td>2</td> 
 
    <td> 
 
     <input type='text' value='MOUSE' class="inputType"> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td>3</td> 
 
    <td> 
 
     <input type='text' value='CAT' class="inputType"> 
 
    </td> 
 
    </tr> 
 
</table>

來源

2016-02-12 08:29:40 Rahul

簡短的回答是：搜索「輸入」，而不是「TD」並使用「VAL（）」而不是「文本（）」

$("#search").keyup(function() { 
    var data = this.value.toUpperCase().split(" ");  
    $(".searchtbl").find(":input").each(function (index, elem) { 
    var $elem = $(elem); 
     for (var d = 0; d < data.length; ++d) { 
       //alert($elem.val()); 
      // Highlight 
      if ($elem.val().toUpperCase().indexOf(data[d].toUpperCase()) != -1) { 
       $elem.addClass('highlighted'); 

      } else { 
       $elem.removeClass('highlighted'); 
      } 
     } 
    })  
})

https://jsfiddle.net/nc2k21gt/

來源

2016-02-12 08:35:03

突出TD文本搜索與輸入

回答

相關問題