如何使用 jQuery 在以下场景中显示/隐藏表格的内容？答案

【问题标题】：How to show/hide the content of a table in following scenario using jQuery?如何使用 jQuery 在以下场景中显示/隐藏表格的内容？
【发布时间】：2014-03-11 04:58:03
【问题描述】：

我的网站使用 PHP、Smarty、jQuery 等。我正在显示一个问题列表，它是可用的答案选项和该问题的正确答案。现在每个问题都有一个超链接。当用户点击特定问题的超链接时，该特定问题的内容（选项标题、实际选项、正确答案）如果正在显示，则应该隐藏，如果内容隐藏，则应该显示。当显示内容时，超链接应该有文本“隐藏答案”，当内容被隐藏时，超链接的文本应该是“显示答案”。另一件事是，当页面最初加载时，每个问题的上述内容（选项标题、实际选项、正确答案）应该被隐藏，每个问题的超链接文本应该是“显示答案”。这个问题列表的HTML如下：

<div id="entrancelist">
        <h2 class="heading">favourite questions</h2>
<table cellpadding="0" cellspacing="0" border="0" width="98%" style="padding:5px;" align="center">
          <tbody>

            <tr>
              <td>
                <div class="sub_name" id="" >
                  <div style="height:auto; overflow:hidden; width:100%;">
                      <table cellpadding="5" cellspacing="0" border="0" width="100%" class="manage_box"> 
                      <tr class="question_info">
                        <td valign="top" width="70%">
                          <b>Question 1.</b></td>
                          <td valign="top" align="left" width="30%">
                          <b><a href ="#" style="margin-right:0px;" class="fav_que" id="16164">Remove From Favourite Question</a></b></td></tr>
                          <tr class="question_info">
                          <td valign="top" colspan="2">
                          <br /><b>Direction : </b><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">

                          </td></tr>
                          <tr class="question_info">
                          <td valign="top"> 
                          <b>Question : </b>
                                                    <br/><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html><body><p>A 150 m long train is moving to north at a speed of 10 m/s. A parrot flying towards south with a speed of 5 m/s crosses the train. The time taken by the parrot the cross to train would be :<br></p></body></html>
                                                                            </td>
                        <td valign="bottom" align="right"><b>QUE16164</b></td>
                      </tr>
                        <tr class="question_info">                    
                          <td valign="top" colspan="2">
                          <a href="#" class="show-ans">Show Answers</a>
                          </td>
                        </tr> 
                      </td>                      
                    </tr>
                                            <tr>
                        <td colspan="2">
                          <b>Options : </b>
                        </td>
                      </tr>
                                                                  <tr>
                        <td class="options" colspan="2">                     1 .

30 s

                        </td>
                      </tr>
                                            <tr>
                        <td class="options" colspan="2">                     2 .

15 s

                        </td>
                      </tr>
                                            <tr>
                        <td class="options" colspan="2">                     3 .

8 s

                        </td>
                      </tr>
                                            <tr>
                        <td class="options" colspan="2">                     4 .

10 s

                        </td>
                      </tr>
                                            <tr>
                        <td colspan="2">
                          <b>Correct Answer :</b> 4   
                        </td>
                      </tr>              
                                      </table>
                            <table cellpadding="5" cellspacing="0" border="0" width="100%" class="manage_box"> 
                      <tr class="question_info">
                        <td valign="top" width="70%">
                          <b>Question 2.</b></td>
                          <td valign="top" align="left" width="30%">
                          <b><a href ="#" style="margin-right:0px;" class="fav_que" id="38552">Remove From Favourite Question</a></b></td></tr>
                          <tr class="question_info">
                          <td valign="top" colspan="2">
                          <br /><b>Direction : </b><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">

                          </td></tr>
                          <tr class="question_info">
                          <td valign="top"> 
                          <b>Question : </b>
                                                    <br/><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html><body><p>For figure 24, the correct relation is -<br><img height="110" src="http://www.entranceprime.com/upload_media/questions/original/1328941281_38.JPG" width="172"></p></body></html>
                                                                            </td>
                        <td valign="bottom" align="right"><b>QUE38552</b></td>
                      </tr>
                        <tr class="question_info">                    
                          <td valign="top" colspan="2">
                          <a href="#" class="show-ans">Show Answers</a>
                          </td>
                        </tr> 
                      </td>                      
                    </tr>
                                            <tr>
                        <td colspan="2">
                          <b>Options : </b>
                        </td>
                      </tr>
                                                                  <tr>
                        <td class="options" colspan="2">                     1 .

<img src="http://localhost/eprime/entprm/web/ckeditor_3.6.1/plugins/ckeditor_wiris/integration/showimage.php?formula=9329a28849bd94b3bcc49e3a4b69a595.png" class="Wirisformula" align="middle">

                        </td>
                      </tr>
                                            <tr>
                        <td class="options" colspan="2">                     2 .

<img src="http://localhost/eprime/entprm/web/ckeditor_3.6.1/plugins/ckeditor_wiris/integration/showimage.php?formula=c8c15583e8f5742625e6d80c71f3a691.png" class="Wirisformula" align="middle">

                        </td>
                      </tr>
                                            <tr>
                        <td class="options" colspan="2">                     3 .

<img src="http://localhost/eprime/entprm/web/ckeditor_3.6.1/plugins/ckeditor_wiris/integration/showimage.php?formula=af6f96bda5c2f575fc42e4751c5772fe.png" class="Wirisformula" align="middle">

                        </td>
                      </tr>
                                            <tr>
                        <td class="options" colspan="2">                     4 .

All of the above

                        </td>
                      </tr>
                                            <tr>
                        <td colspan="2">
                          <b>Correct Answer :</b> 4   
                        </td>
                      </tr>              
                                      </table>
                            <table cellpadding="5" cellspacing="0" border="0" width="100%" class="manage_box"> 
                      <tr class="question_info">
                        <td valign="top" width="70%">
                          <b>Question 3.</b></td>
                          <td valign="top" align="left" width="30%">
                          <b><a href ="#" style="margin-right:0px;" class="fav_que" id="80763">Remove From Favourite Question</a></b></td></tr>
                          <tr class="question_info">
                          <td valign="top" colspan="2">
                          <br /><b>Direction : </b><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">

                          </td></tr>
                          <tr class="question_info">
                          <td valign="top"> 
                          <b>Question : </b>
                                                    <br/><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html><body><p>Derive the expression for the time period of a simple pendulum which depends on the lenght, mass, and gravitational acceleration.</p></body></html>
                                                                            </td>
                        <td valign="bottom" align="right"><b>QUE80763</b></td>
                      </tr>
                        <tr class="question_info">                    
                          <td valign="top" colspan="2">
                          <a href="#" class="show-ans">Show Answers</a>
                          </td>
                        </tr> 
                      </td>                      
                    </tr>
                                            <tr>
                        <td colspan="2">
                          <b>Options : </b>
                        </td>
                      </tr>
                                                                  <tr>
                        <td class="options" colspan="2">                     1 .

<img src="http://localhost/eprime/entprm/web/ckeditor_3.6.1/plugins/ckeditor_wiris/integration/showimage.php?formula=b8bb97da575d595129425d5ba0cac48e.png" class="Wirisformula" align="middle">

                        </td>
                      </tr>
                                            <tr>
                        <td class="options" colspan="2">                     2 .

<img src="http://localhost/eprime/entprm/web/ckeditor_3.6.1/plugins/ckeditor_wiris/integration/showimage.php?formula=2fa6f58b13fc7b4dbb999484c01320ca.png" class="Wirisformula" align="middle">

                        </td>
                      </tr>
                                            <tr>
                        <td class="options" colspan="2">                     3 .

<img src="http://localhost/eprime/entprm/web/ckeditor_3.6.1/plugins/ckeditor_wiris/integration/showimage.php?formula=18d2b494bf784790e26d743900503669.png" class="Wirisformula" align="middle">

                        </td>
                      </tr>
                                            <tr>
                        <td class="options" colspan="2">                     4 .

<img src="http://localhost/eprime/entprm/web/ckeditor_3.6.1/plugins/ckeditor_wiris/integration/showimage.php?formula=4e3da7281a68c57642beb71a7fddd9d6.png" class="Wirisformula" align="middle">

                        </td>
                      </tr>
                                            <tr>
                        <td colspan="2">
                          <b>Correct Answer :</b> 1   
                        </td>
                      </tr>              
                                      </table>
                        </div>
              </div>
            </td>
          </tr>

        </tbody>
      </table>
</div>

我应该如何做到这一点？我尝试了很多来实现这一目标，但未能成功。任何人都可以在这方面帮助我吗？感谢您花费宝贵的时间来理解我的问题。等待您的回复。我试图显示隐藏内容的 jQuery 代码如下。它不适合我。当我单击超链接时，所有问题都会被隐藏。但在这种情况下，内容会在表单加载时显示。现在我希望在表单加载时隐藏每个问题的内容。单击超链接时，它应该适用于相关问题。所以请帮助我实现这一目标：

$(".show-ans").click(function(e){

  e.preventDefault();
  if($(this).parent().parent().parent().children("tr:last").is(":visible"))
  {
      $(this).parent().parent().parent().children("tr:not(:first)").hide();
  $(this).html("Show Answer");
  }
  else
  {
      $(this).parent().parent().parent().children("tr:not(:first)").show();
  $(this).html("Hide Answer");
  }
 });

【问题讨论】：

发布你的 jQuery 代码你尝试了什么？
你能提供一个 jsfiddle 以正确理解吗？
使用 jquery 手风琴...api.jqueryui.com/accordion
@Unknown,@kushal jain：我已将我尝试的代码添加到问题中。
你可以使用 $(this).closest('tr')... 或 $(this).closest('.classname')... 而不是 .parent().parent( ).parent().

标签： javascript jquery html hyperlink show-hide

【解决方案1】：

将此代码添加到document.ready()

$(".show-ans").each(function(){
  $(this).parent().parent().parent().children("tr:not(:first)").hide();
  $(this).html("Show Answer");    
});

Demo

编辑

$(".show-ans").each(function () {
        $(this).parent().parent().parent().children("tr:not(:first)").hide();
        $(this).html("Show Answer");
        $(this).parent().parent().show();
    });

   $(".question_info").show();
    $(".show-ans").click(function (e) {

        e.preventDefault();
        if ($(this).parent().parent().parent().children("tr:last").is(":visible")) {
            $(this).parent().parent().parent().children("tr:not(:first)").hide();
            $(this).html("Show Answer");
        }
        else {
            $(this).parent().parent().parent().children("tr:not(:first)").show();
            $(this).html("Hide Answer");
        }
        $(this).parent().parent().show();
    });

Updated Fiddle

【讨论】：

Anoop Joshi，您错误地从我的旧问题中获取了 HTML。新的 HTML 完全不同。您的想法适用于旧 HTML，但不适用于新的 HTML 表格。你能否让这个想法在我提出质疑的新 HTML 上可行？
感谢您的帮助兄弟，但在这个更新的小提琴中，问题文本也被隐藏了。它应该显示出来。我们不必对它做任何事情。我们需要显示/隐藏的东西从选项标题开始。你能纠正这个问题并更新你的小提琴吗？
：最初，当页面加载时，它会根据我的期望隐藏选项和正确答案。但是，当我单击“显示答案”时，它也可以正常工作。但是当我单击隐藏答案时，问题就存在了。它隐藏了包括问题文本在内的所有内容。实际上，当我单击隐藏答案时，它不应该隐藏问题文本。你能做这个小改动并相应地更新你的小提琴吗？再次感谢兄弟的帮助。
@PHPGeek 我已经更新了小提琴jsfiddle.net/JCVnY/41 如果对您有帮助，请接受答案
运行完美。我已经接受了你的回答并且也投了赞成票。非常感谢兄弟的大力帮助。