Question

我有以下代码，允许我通过搜索框找到带有文本内容的td列。我需要能够找到类等于输入的搜索框文本的表列，而不是文本内容。

如何修改此代码才能执行此操作？

@Autowired
private RoomEntityToReservationResponseConverter converter;

...
Page<RoomEntity> roomEntityList = pageableRoomRepository.findAll(pageable);
return roomEntityList.map(converter::convert);

Answer 1

取代hasClass，获取所有td的类（attr），然后使用includes检查输入的字符串是否包含td类的字符。如果为true，则显示closest表，否则隐藏。

但是如果你想考虑字符串的开头，请改用startsWith。

现在，要确定是否根据输入的文本找不到匹配项，您需要检查表格长度，然后将其与隐藏的长度进行比较。

只是一个示例，因为您没有包含HTML标记：

$(".searchbox").on('keyup', function() {
  var textinput = $(this).val().toLowerCase();
  var tbl_len = $('table').length;
  $("td").each(function() {
    var hasClass = $(this).attr("class");
    if (hasClass) {
      //var res = hasClass.includes(textinput);
      var res = hasClass.startsWith(textinput);
      if (res) {
        $(this).closest('table').show();
      } else {
        $(this).closest('table').hide();
      }
    }
    if ($('table:hidden').length === tbl_len) {
     $('#prompt').text('No Match Found.')
    }else{
    $('#prompt').text(' ')
    }
  });

});

.ihave {
  background-color: red
}

.ihavenot {
  background-color: green
}

table{
  margin-bottom: 10px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Type ihave or ihavenot : <input type="text" class="searchbox" />
<br/>
<p id="prompt"></p>
<table border="1" class="ihave_tbl">
  <tr>
    <th>Name (ihave)</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Berglunds snabbkop</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td class="ihave">North/South</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td class="ihave">Koniglich Essen</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td>Paris specialites</td>
    <td>France</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Canada</td>
  </tr>
</table>

<table border="1" class="ihave_tbl">
  <tr>
    <th>Name (ihave)</th>
    <th>Country </th>
  </tr>
  <tr>
    <td>Berglunds snabbkop</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td class="ihave">North/South</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td class="ihave">Koniglich Essen</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td>Paris specialites</td>
    <td>France</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Canada</td>
  </tr>
</table>

<table border="1">
  <tr>
    <th>Name (ihavenot)</th>
    <th>Country</th>
  </tr>
  <tr>
    <td class="ihavenot">Berglunds snabbkop</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>North/South</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Koniglich Essen</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td>Paris specialites</td>
    <td>France</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Canada</td>
  </tr>
</table>

Answer 2

$(this).find("td." + val)应该全部

Answer 3

在每个keyup上搜索类名都不是一个好主意。最好添加一个按钮并单击事件。基本代码看起来像这样。

<强> HTML：

<input id='searchbox'/><input type='button' id='btn' value='click'>
<table>
  <tr>
    <td class='first'>aaa</td>
    <td class='second'>ddd</td>
  </tr>
  <tr>
    <td class='first'>bbb</td>
    <td class='second'>eee</td>
  </tr>
  <tr>
    <td class='first'>ccc</td>
    <td class='second'>fff</td>
  </tr>
</table>

Jquery代码：

<script>
         $("#btn").click(function () {
           var txt = $('#searchbox').val();
               if (txt != '') {
                   search(txt);
               }
           });

            function search(className) {
              // You can do anything here.. for ex. show()/hide() etc
               $('table tr').find("td." + className).addClass('highlight');
            }
</script>

演示：https://jsfiddle.net/imsangram/7ntrzsgc/

使用类名而不是文本内容查找结果

3 个答案: