jquery - jQuery点击并显示点击的数据

Question

我想在单击该行时显示该行的数据。我用 jQuery 做到了这一点，但我不确定如何使它更通用。现在我给第一行一个 id 和目标也一个 id，但是你怎么能在不为每一行使用不同的 id 的情况下为每一行做这个通用的呢？

$(document).ready(function () {
  $('#d01').click(function() {
  $('#c01').css('display', 'block');
  });
});

我的小提琴。

希望我清楚....

问候，肯尼斯

Answer 1

为每一行分配一个类并处理该类的单击事件。为行分配 id 'd01'，为要显示的表分配 'd01_data'，并为可点击的元素分配一个类 'row'。

$(document).ready(function () {
  $('.row').click(function() {
    var table_id = '#'+$(this).attr('id')+'_data';
    $(table_id).show();
  });
});

Answer 2

我会将aside您希望显示的唯一 ID 分配为data-每个可点击行上的隐藏属性：

<tr data-details="c01" class="customer">
...
<table id="c01" class="aside hidden">

.data('details')然后，您可以使用并仅显示该表来提取它：

$(document).ready(function () {
    $('tr.customer').click(function() {
        var id = $(this).data('details');
        $('table.hidden').hide();
        $('#'+id).show();
    });
});   

http://jsfiddle.net/mblase75/7x3CZ/

我更喜欢这种方法，因为它可以让您尽可能地将 HTML 与 JavaScript 分开，并让您可以灵活地根据自己的喜好分配 ID。

Answer 3

您可以在选择器中使用 CSS 类而不是 ID。

例如

...
<tr class="myClassToIndicateIWantThisClickable">...</tr>
...

然后在你的 JS 中使用：

$(document).ready(function () {
  $('.myClassToIndicateIWantThisClickable').click(function() {
  // do my stuff here
  });
});

Answer 4

当您想在许多元素上放置相同的事件时，您可以使用类而不是 ID。

所以给每个<tr>一个类（例如class="clickable"），然后使用这个类绑定一个点击事件。单击元素后，您可以使用this关键字获取特定对象数据。

看到这个小提琴。

HTML：

<table>
<thead>
    <tr class="grey">
        <th width="140px">Achternaam</th>
        <th width="80px">Initialen</th>
        <th width="80px">Tussenv.</th>
        <th width="80px">Geslacht</th>
        <th width="100px">Geb.dat.</th>
    </tr>
</thead>
<tbody>
    <tr id="d01" class="customer clickable">
        <td>Pietersen</td>
        <td>M.</td>
        <td>Van</td>
        <td>Male</td>
        <td>18-07-1956</td>
    </tr>
    <tr class="customer grey clickable">
        <td>Janssen</td>
        <td>A.</td>
        <td>&nbsp;</td>
        <td>Female</td>
        <td>16-12-1972</td>
    </tr>
    <tr class="customer clickable">
        <td>Puk</td>
        <td>P.L.</td>
        <td>Van der</td>
        <td>Female</td>
        <td>16-07-1965</td>
    </tr>
</tbody>
</table>
<br /><br />
<table id="c01" class="aside hidden">
    <tbody>
        <tr>
            <td width="115px">Achternaam</td>
            <td width="115px">Pietsersen</td>
        </tr>
        <tr>
            <td>Tussenvoegsel</td>
            <td>Van</td>
        </tr>
        <tr>
            <td>Initialen</td>
            <td>M.</td>
        </tr>
        <tr>
            <td>Geslacht</td>
            <td>Man</td>
        </tr>
        <tr>
            <td>Geboortedatum</td>
            <td>18-07-1956</td>
        </tr>
    </tbody>
</table> 
<table class="aside hidden">
    <tbody>
        <tr>
            <td width="115px">Achternaam</td>
            <td width="115px">Pietsersen</td>
        </tr>
        <tr>
            <td>Tussenvoegsel</td>
            <td>Van</td>
        </tr>
        <tr>
            <td>Initialen</td>
            <td>M.</td>
        </tr>
        <tr>
            <td>Geslacht</td>
            <td>Man</td>
        </tr>
        <tr>
            <td>Geboortedatum</td>
            <td>18-07-1956</td>
        </tr>
    </tbody>
</table>  
<table class="aside hidden">
    <tbody>
        <tr>
            <td width="115px">Achternaam</td>
            <td width="115px">Pietsersen</td>
        </tr>
        <tr>
            <td>Tussenvoegsel</td>
            <td>Van</td>
        </tr>
        <tr>
            <td>Initialen</td>
            <td>M.</td>
        </tr>
        <tr>
            <td>Geslacht</td>
            <td>Man</td>
        </tr>
        <tr>
            <td>Geboortedatum</td>
            <td>18-07-1956</td>
        </tr>
    </tbody>
</table>  ​

JS：

$(document).ready(function () {
    $('.clickable').click(function() {
        var $this = $(this);
        $this.find('td').each(function(){
         //inside the each loop, the 'this' keyword refers to the current <td>
         alert($(this).text());
        });
    $('#c01').css('display', 'block');
    });
});    
​

Answer 5

试试这个，我已经更新了小提琴：

工作文件

我给了

id=c01 

到

id=c03 

对于不同的表。并且还在表中添加了一个自定义字段，该字段具有需要显示的表 ID。

在每次 tr 单击时，都会显示您的表格。

Answer 6

$(document).ready(function () {
 $('#anyid').click(function() {
 $(this).css('display', 'block');
 });

});

<tr id="anyid">
 <td>hello</td>
 <td>world</td>
</tr>
<tr id="anyid">
 <td>hello1</td>
 <td>world1</td>
</tr>