如何使用 div 父级在表格中查找文本答案

【问题标题】：How to find text inside table with div parent如何使用 div 父级在表格中查找文本
【发布时间】：2016-05-16 06:33:51
【问题描述】：

我想在带有表格的 div 父级中查找文本，如果我在搜索栏中写任何文本，我只想显示结果，其余的 div 隐藏，我有不同的 td，我想在四个单元格中搜索（从左到右）最后一个单元格不重要

这是我的 HTML：

<div class="caja-orden-curso" alt="3">
    <div class="contenido-curso">
        <table id="perrito" border="1" style="width:98%">
           <tr>
              <td width="220" height="100">
                 <div id="vehicle_type" class="top-order">
                    36624
                 </div>
              </td>
              <td width="200">
                 <div id="step_form_1" class="order-steps">
                    <span id="created">02/02/2016 10:59</span>
                 </div>
              </td>
              <td width="300">
                 <div class="order-details-top" style="height: 14px;">presidente masaryk, 29, , polanco</div>
                 <div class="order-details-bottom" style="height: 23px;">colima, 323, , roma norte</div>
              </td>
              <td width="120">
                 <div class="order-details-top">
                    alexis
                    <div>
                       <div class="order-details-bottom">
                          saul
                       </div>
              </td>
              <td width="120">
              565897423
              </td>
           </tr>
        </table>
    </div>
    <div class="color-lateral-curso">
    </div>
    <div class="tam-tabla-orden">
    </div>
</div>
<div class="caja-orden-curso" id="statu-20" alt="12">
    <div class="contenido-curso">
        <table id="perrito" border="1" style="width:98%">
           <tr>
              <td width="220" height="100">
                 <div id="vehicle_type" class="top-order">
                    35684
                 </div>
              </td>
              <td width="200">
                 <div id="step_form_1" class="order-steps">
                    <span id="created">01/02/2016 10:59</span>
                 </div>
              </td>
              <td width="300">
                 <div class="order-details-top" style="height: 14px;">yumnbvfd, 78984,</div>
                 <div class="order-details-bottom" style="height: 23px;">jhgfre, 483</div>
              </td>
              <td width="120">
                 <div class="order-details-top">
                    rtynbv
                    <div>
                       <div class="order-details-bottom">
                          zsdf
                       </div>
              </td>
              <td width="120">
              565897423
              </td>
           </tr>
        </table>
    </div>
    <div class="color-lateral-finalizada-segundo" id="statu-9">
    </div>
    <div class="tam-tabla-orden">
    </div>
</div>

这是我的脚本：

$("#buscador").keyup(function() {
  var dInput = $(this).val();
      if (!this.value) {
         $('div.caja-orden-curso').fadeIn();
      }
      else
        {
         $("table#perrito").each(function()
            {
             $(this).find('div.top-order:contains(' + dInput + ')').length > 0 ?
               $(this).show() : $(this).parents('div.caja-orden-curso').fadeOut(); 
          });
       }

  });

我的示例仅适用于第一个单元格，其他三个单元格我无法使用。

这是我的fiddle

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

页面中的 ID 必须是唯一的。因此将id="perrito" 更改为class="perrito" 并执行以下操作。

$("table.perrito").each(function() {
  if ($(this).find('div:contains(' + dInput + ')').length) 
    $(this).parents('div.caja-orden-curso').fadeIn();
  else
    $(this).parents('div.caja-orden-curso').fadeOut();
});

DEMO

【讨论】：

我猜是错字。 table.perrito] 应该是 table.perrito
没问题。它很容易被发现:-)
谢谢，使用此代码，我可以在第一个单元格中找到，但我想在其他三个单元格中找到，例如日期、名称、地址甚至名称，所以我可以使用类似 if ( ($(this).find('div.top-order:contains(' + dInput + ')').length) && ($(this).find('div.order-steps:contains(' + dInput + ')').length)) 的内容?
@RejithRKrishnan 只有一件事，也是最后一件事，如果我找到结果，它可以显示，但是如果我在返回空输入时删除文本，有时会显示所有内容，但其他任何内容都不显示，你能解释一下吗，抱歉询问每一步，但我想了解它
@victor 可以通过删除$(this).hide()/$(this).show()来修复，这些都不需要。 :)

【解决方案2】：

在这里，您仅在“顶级”类上使用了查找功能。如果您想使用所有 4 个单元格，那么您也可以将这个类应用于所有三个单元格。你可以试试这个

<div class="caja-orden-curso" alt="3">
<div class="contenido-curso">
  <table id="perrito" border="1"style="width:98%">
                      <tr>
                        <td width="220" height="100">
                         <div id="vehicle_type" class="top-order">
                          36624
                         </div>
                        </td>
                        <td width="200">
                          <div id="step_form_1" class="order-steps top-order">
                            <span id="created">02/02/2016 10:59</span>
                          </div>
                        </td>
                        <td width="300">
                        <div class="order-details-top top-order" style="height: 14px;">presidente masaryk, 29, , polanco</div>
<div class="order-details-bottom top-order" style="height: 23px;">colima, 323, , roma norte</div>
                        </td>
                        <td width="120">
                          <div class="order-details-top top-order">
                          alexis
                          <div>
                            <div class="order-details-bottom top-order">
                          saul
                          </div>
                        </td>
                         <td width="120">
                          565897423
                        </td>
                      </tr>
                    </table>
                  </div>
                <div class="color-lateral-curso">
                </div>
                <div class="tam-tabla-orden">
                </div>
              </div>
              <div class="caja-orden-curso" id="statu-20" alt="12">
                <div class="contenido-curso">
                    <table id="perrito" border="1"style="width:98%">
                      <tr>
                        <td width="220" height="100">
                         <div id="vehicle_type" class="top-order">
                          35684
                         </div>
                        </td>
                        <td width="200">
                          <div id="step_form_1" class="order-steps top-order">
                            <span id="created">01/02/2016 10:59</span>
                          </div>
                        </td>
                        <td width="300">
                        <div class="order-details-top" style="height: 14px;">yumnbvfd, 78984,</div>
<div class="order-details-bottom top-order" style="height: 23px;">jhgfre, 483</div>
                        </td>
                        <td width="120">
                          <div class="order-details-top top-order">
                          rtynbv
                          <div>
                            <div class="order-details-bottom top-order">
                          zsdf
                          </div>
                        </td>
                         <td width="120">
                          565897423
                        </td>
                      </tr>
                    </table>
                  </div>
                <div class="color-lateral-finalizada-segundo" id="statu-9">
                </div>
                <div class="tam-tabla-orden">
                </div>
              </div>

【讨论】：

我不能在所有单元格中使用 top-order 因为这个类使用 css 所以我想我可以分配另一个像 qwerty 这样的类，可以吗？
是的，你也可以分配另一个班级

【解决方案3】：

如果你想在 table 上搜索或排序或...，你可以使用 DataTables jQuery 插件

分页、即时搜索和多列排序
支持几乎所有数据源：轻松主题化：DataTables、jQuery 用户界面、引导程序、基础
Ajax 自动加载数据
和...

$('#myTable').DataTable();

DataTables jQuery plugins

【讨论】：

如果我使用数据表，我会丢失我的 css 样式吗？
不，dataTable 是可主题化的，您可以为自己的表格自定义样式，** See this **