Javascript 如何使用JQUERY在HTML中仅显示单击的元素_Javascript_Jquery_Html

Javascript 如何使用JQUERY在HTML中仅显示单击的元素

javascript jquery html

Javascript 如何使用JQUERY在HTML中仅显示单击的元素,javascript,jquery,html,Javascript,Jquery,Html,我有一个下面的html标记，它从数据库中输入数据，并以html格式显示为表 <html> <body> <div> <button type="button" class="button">DATA_1</button> <table class="data_table"> <tr> <th>XXX</th> </tr

我有一个下面的html标记，它从数据库中输入数据，并以html格式显示为表

 <html>
  <body>
   <div>
    <button type="button" class="button">DATA_1</button>
     <table class="data_table">
      <tr>
      <th>XXX</th>
      </tr>
      <tr>
      <td>YYY</td>
      </tr>
    </table>
   <button type="button" class="button">DATA_2</button>
    <table class="data_table">
      <tr>
      <th>XXX</th>
      </tr>
      <tr>
      <td>YYY</td>
      </tr>
    </table>
   <button type="button" class="button">DATA_3</button>
    <table class="data_table">
      <tr>
      <th>XXX</th>
      </tr>
      <tr>
      <td>YYY</td>
      </tr>
     </table> 
    </div>
   </body>
 </html>

此外，按钮和表格是自动生成的，其页面是完全动态的。我没有任何控制权来限制数据。表格将根据db提供的输入数据增加。现在，我只想根据用户单击显示特定记录。如果用户单击DATA_1按钮，则应显示相应的表格，并隐藏其他表格

我尝试在下面的脚本中显示未按预期工作的相应数据：

   $(document).ready(function(){
      $('.button').on('click', function(){
      $('.data_table').show();
     });
   });

上面的代码扩展了所有表，而不是显示/隐藏其直接子表或第一个匹配子表

此外，我还想执行相同的操作，单击DATA_1按钮将显示立即的classdata_表，其他将用以下html标记隐藏：

  <html>
      <body>
        <div id="tab">
          <div>
            <button type="button" class="button">DATA_1</button>
          </div>
          <div class="logtitude">
             <table class="data_table">
             <tr>
             <th>XXX</th>
             </tr>
             <tr>
             <td>YYY</td>
             </tr>
             </table>
           </div>
          <div>
            <button type="button" class="button">DATA_2</button>
          </div>
          <div class="logtitude">
             <table class="data_table">
             <tr>
             <th>AAA</th>
             </tr>
             <tr>
             <td>YYY</td>
             </tr>
             </table>
          </div>
          <div>
            <button type="button" class="button">DATA_3</button>
          </div>
          <div class="logtitude">
             <table class="data_table">
             <tr>
             <th>BBB</th>
             </tr>
             <tr>
             <td>YYY</td>
             </tr>
             </table>
          </div>
        </div>
       </body>
     </html>

有人能帮我做到这一点吗？尝试单击按钮时，我只想显示/隐藏直接子表或第一个匹配的子表。

您需要使用$this.next。如果使用$'.data_table'，它将显示所有具有该类的表。因此，您需要使用$this.next

$document.readyfunction{ $'.data_table'.hide； $'.button'。单击，函数{ 如果$this.parent.next.find'table.data\u table'。是否可见{ $this.parent.next.find'table.data\u table'。隐藏； }否则{ $'.data_table'.hide； $this.parent.next.find'table.data\u table'.show； } }; }; 数据1 XXX YYY 数据1 AAA YYY 数据1 BBB YYY 你需要使用$this.next。如果使用$'.data_table'，它将显示所有具有该类的表。因此，您需要使用$this.next

必须先隐藏所有表：$'.data_table'.hide；你必须在每次点击按钮后再做一次

使单击按钮旁边的表可见：$this.next'.data\u table'.show； $document.readyfunction{ /*最初隐藏所有表*/ $'.data_table'.hide； $'.button'。单击，函数{ /*再次单击“隐藏所有表”*/ $'.data_table'.hide； /*在单击的按钮旁边显示表格*/ $this.next'.data_table'.show； }; }; 数据1 XXX YYY 数据2 XXX YYY 数据表3 XXX YYY

必须先隐藏所有表：$'.data_table'.hide；你必须在每次点击按钮后再做一次

你应该这样写：

$('.button').on('click', function(){
    $(this).next().show().siblings('.data_table').hide();
});

你应该这样写：

$('.button').on('click', function(){
    $(this).next().show().siblings('.data_table').hide();
});

真是太棒了。当我尝试单击DATA_2时，是否有任何方法隐藏DATA_1按钮记录。理想情况下，如果用户单击一个按钮，它只显示一条记录，而另一条则应该隐藏。是的，这是可能的。已根据它更新了代码。是否有任何方法可以找到超出div标记的元素。就像下面。。。。这是动态表。是否有任何方法仅显示基于单击按钮的特定表的示例代码。如果您需要更多信息，我将添加截取的示例代码。是的，请共享示例代码片段或JSFIDLE。这真是太棒了。当我尝试单击DATA_2时，是否有任何方法隐藏DATA_1按钮记录。理想情况下，如果用户单击一个按钮，它只显示一条记录，而另一条则应该隐藏。是的，这是可能的。已根据它更新了代码。是否有任何方法可以找到超出div标记的元素。就像下面。。。。这是动态表。是否有任何方法仅显示基于单击按钮的特定表格的示例代码。如果您需要更多信息，我将添加截取的示例代码。是的，请共享示例代码片段或 jsFiddle。