Question

根据此处提出的问题：https://www.quora.com/How-do-I-display-a-div-table-when-a-link-is-clicked

我使用了最佳答案给出的代码。

现在，我的代码被修改为使用变量：

    echo '<a href="#" onclick="toggleAppearance();">'.$row['Name'] .'</a>';

这是一段时间的循环。

    <div id="data-table" style="visibility: hidden;">
    <table>
    <?php
    if $Name == 
    ?>
    </table>
    </div>

我的div应该显示选择了Name的项目的数据。例如：如果选择“Robin”，将显示Robin的数据。那么如何让div检查点击了哪个名称/链接，然后显示该名称/链接的数据？

Answer 1

你的问题有点难以理解。希望这可以解决您的一些前端问题。

HTML：

<div class="container">
<h3>Triggers</h3>
<p class='table-reference' data-record-ref='1'>Highlight Row #1</p>
<p class='table-reference' data-record-ref='2'>Highlight Row #2</p>
<p class='table-reference' data-record-ref='3'>Highlight Row #3</p>
<hr>
<h3>Table</h3>
<table id="record-table">
<thead>
  <tr>
     <th>ID</th>
     <th>Data</th>
  </tr>
</thead>
<tbody>
  <tr data-record='1'>
     <td>#1</td>
     <td>Record</td>
  </tr>
  <tr data-record='2'>
     <td>#2</td>
     <td>Record</td>
  </tr>
  <tr data-record='3'>
     <td>#3</td>
     <td>Record</td>
  </tr>
</tbody>
</table>
</div>

<强>的Javascript / jQuery的：

(function($) {
  $(function() {
     $("*[data-record-ref]").click(function() {
        var id = $(this).data("record-ref");
        var element = $("*[data-record='"+id+"']");

        if(!!element) {
           $(this).toggleClass("highlight");
           element.toggleClass("highlight");
        } else {
           console.error("Record Not Find.");
        }        
     });
  });
}) ($);

Demo

根据单击的项目显示div中的数据

1 个答案: