Question

在这个波纹管程序中，我只显示表格行，当且仅当选中相关的复选框时。当且仅当没有检查相关的复选框时，我才隐藏表格行。

这是我的复选框定义：

                 <div id="cb">
                    <input type="checkbox" value="air india">
                    <input type="checkbox" value="king fisher">
                    <input type="checkbox" value="Go Air">
                 </div>

示例：如果我单击第一个复选框，将显示包含值'air india'的表格行。如果我取消选中将隐藏。

这里隐藏效果很好，但是显示不正常。它缺少内表。贝娄是我的代码。

         <script type="text/javascript" src="jquery.js"></script>
         <script type="text/javascript">
         $(document).ready(function()
         {
                function inArray(haystack, needle)
                {

                   var found = false;
                   $.each(haystack, function(i, elem)
                   {
                      if(elem === needle)
                      {
                            found = true;
                            return false;
                      }
                  });
                  return found;
              }



             $("#cb").find('input:checkbox').click(function()
             {
                 var myArray =new Array();
                 $("#cb").find('input:checkbox').each(function(index)
                 {
                        if($(this).attr("checked")==true)
                        {
                              myArray.push($(this).val());
                        }

                });
                $('#abc tr').each(function()
                {
                     var td = $('> td:nth-child(2)', this);
                    if(!inArray(myArray, td.text()))
                    {
                            $(this).hide();
                    }
                    else
                    {
                            $(this).show();
                    }
               });

             });

          });

         </script>

           <table id="abc" border="1">
                <tr >
                     <td></td>
                     <td>air india</td>
                     <td>
                          <table>
                             <tr>
                                <td>Hai</td>
                             </tr>
                          </table>
                     </td>
                 </tr>
                <tr>
                     <td></td>
                     <td>king fisher</td>
                     <td>
                         <table>
                            <tr>
                                <td>Hai</td>
                            </tr>
                         </table>
                     </td>
                </tr>
                <tr>
                     <td></td>
                     <td>Go Air</td>
                     <td>
                          <table>
                             <tr>
                                <td>Hai</td>
                             </tr>
                          </table>
                    </td>
               </tr>
             </table>

           <div id="cb">
                <input type="checkbox" value="air india">
                <input type="checkbox" value="king fisher">
                <input type="checkbox" value="Go Air">
           </div>

Answer 1

这应该像以下一样简单：

$('#cb > input:checkbox').click(function(){
    $('#abc').find('tr:contains("' + $(this).val()+ '")').toggle(this.checked);
})

实例：http://jsfiddle.net/q5rVE/

Answer 2

我认为你总是从这个函数返回false

function inArray(haystack, needle)
            {

               var found = false;
               $.each(haystack, function(i, elem)
               {
                  if(elem === needle)
                  {
                        found = true;
                        return false;
                  }
              });
              return found;
          }

我认为可能会喜欢这个

                  if(elem === needle)
                  {
                        found = true;
                        return found;                            
                  }

Answer 3

我开始使用jQuery.inArray（） - 函数而不是自己制作。

但这不是你的问题，$（'＃abc tr'）也会在内表中选择tr，并直接隐藏它们。

Jquery：表行隐藏和显示有问题吗？

4 个答案: