Question

如何在不重复的情况下点击每一行

这是一个显示问题的例子，参数可以是代码：

<table>
<thead>
    <tr>
        <th>Code</th>
        <th>User</th>
        ...
    </tr>
</thead>
<tbody>
    <tr>
        <td><a href="page/123"> 123 </a></td>
        <td><a href="page/123"> User A </a></td>
        ...
    </tr>
    <tr>
        <td><a href="page/456"> 456 </a></td>
        <td><a href="page/456"> User B </a></td>
        ...
    </tr>
</tbody>

由于对不起我的英语，我希望你能理解这个问题。

Answer 1

有几种不同的方法可以实现这一目标。这里有一对使用普通的javascript和一个使用jQuery。

普通JS

使用简单的javascript只需使用onclick参数。很直接。

<table>
<thead>
    <tr>
        <th>Code</th>
        <th>User</th>
        ...
    </tr>
</thead>
<tbody>
    <tr onclick="window.location='page/parameter1';">
        <td> 123 </td>
        <td> User A </td>
        ...
    </tr>
    <tr onclick="window.location='page/parameter2';">
        <td> 456 </td>
        <td> User B </td>
        ...
    </tr>
</tbody>
</table>

<强>的jQuery

使用jQuery，您可以添加一个类，以便将其用作选择器。还有一个data-href参数，用于保存用户点击该行时要访问的网址。

<table>
<thead>
    <tr>
        <th>Code</th>
        <th>User</th>
        ...
    </tr>
</thead>
<tbody>
    <tr class="clickable" data-href="page/parameter1">
        <td> 123 </td>
        <td> User A </td>
        ...
    </tr>
    <tr class="clickable" data-href="page/parameter2">
        <td> 456 </td>
        <td> User B </td>
        ...
    </tr>
</tbody>
</table>

<script>
    jQuery(document).ready(function($) {
        $("tr.clickable").click(function() {
            window.location = $(this).data("href");
        });
    });
</script>

Answer 2

您的代码应如下所示：

<table>
<thead>
    <tr>
        <th>Code</th>
        <th>User</th>
        ...
    </tr>
</thead>
<tbody>
    <tr>
        <td><a href="page/parameter1"> 123 </a></td>
        <td><a href="page/parameter1"> User A </a></td>
        ...
    </tr>
    <tr>
        <td><a href="page/parameter2"> 456 </a></td>
        <td><a href="page/parameter2"> User B </a></td>
        ...
    </tr>
</tbody>

添加了结束标记</a>

带链接的可点击行

2 个答案: