Question

我想在点击行时显示行的数据。我使用jQuery来解决这个问题，但我不确定如何使它更通用。现在我给了第一行一个id，目标也给了一个id，但是如何为每一行制作这个泛型而不为每一行使用不同的id？

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

我的fiddle。

希望我很清楚....

此致肯尼斯

Answer 1

将一个类分配给每一行并处理该类的click事件。确定行的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。

E.g。

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

然后在你的JS中使用：


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

Answer 4

如果要在多个元素上放置相同的事件，则使用类而不是ID。

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

请参阅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

试试这个，我已经更新了fidle：

working fidle

我已经给了

id=c01

到

id=c03

表示不同的表。还在表中添加了一个自定义字段，其中包含需要显示的表的id。

每次点击您的表格都会显示。

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>

jQuery单击并显示单击的数据

6 个答案: