社区首页 >问答首页 >Jquery:表行隐藏和显示有问题吗？

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

Stack Overflow用户

提问于 2011-08-23 11:54:28

回答 4查看 1.5K关注 0票数 0

在下面的程序中，当且仅当相关的复选框被选中时，我才会显示表格行。当且仅当相关的复选框未被选中时，我才会隐藏表行。

这是我的复选框定义：

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

例如:如果我点击第一个复选框，将显示包含值'air india‘的表格行。如果我取消勾选，它将会隐藏。

在这里，隐藏工作正常，但显示不工作properly.It缺少内表。贝罗是我的代码。

         <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>

jquery

回答 4

Stack Overflow用户

回答已采纳

发布于 2011-08-23 12:12:45

这应该像下面这样简单：

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

现场示例：http://jsfiddle.net/q5rVE/

票数 2

Stack Overflow用户

发布于 2011-08-23 12:09:33

我认为这个函数总是返回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;                            
                  }