如何使用 JQuery 使表格行的一部分可点击答案

【问题标题】：How to make part of a table row clickable with JQuery如何使用 JQuery 使表格行的一部分可点击
【发布时间】：2016-04-06 05:05:35
【问题描述】：

我希望每个表格行中除了最后一个 <td> 元素之外的所有元素都是一个可点击单元。这是我所拥有的：

<table class="table table-bordered" id="dashboard-table">
    <thead>
        <tr>
            <th>Open Date</th>
            <th>Name</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        @for(ach_case <- caseList) {
            <tr>
                <div class="clickable-row">
                    <td>@ach_case.formatDate(ach_case.dateCreated)</td>
                    <td>@ach_case.name</td>
                </div>
                <td>
                    <button type="button" class="btn-warning btn-action"
                        onclick="window.location='@routes.CaseController.editCase(ach_case.id)';"></button>
                </td>
            </tr>
        }
    </tbody>
</table>

jQuery

$(document).ready(function(){
    $('.clickable-row').click(function() {
        console.log("Row clicked");
    });
});

这没有任何作用。我很累，所以希望这只是一个简单的问题。

【问题讨论】：

在选择器中尝试 tr .clickable-row

标签： javascript jquery html playframework

【解决方案1】：

我稍微更改了代码以进行演示 - 添加警报而不是 console.log，但一种方法是为每个 <td> 添加一个可点击类，除了最后一个包含按钮的。您可以将可点击类添加到<tr>，但您仍然必须防止对每个<tr> 的最后一个<td> 产生影响 - 最好将可点击类添加到您想要的<td>包括而不是将其添加到整行并排除最后一个<td>。

$(document).ready(function(){
    $('.clickable').click(function() {
        alert("Row clicked");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered" id="dashboard-table">
    <thead>
        <tr>
            <th>Open Date</th>
            <th>Name</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
   
            <tr >
                    <td class="clickable">test</td>
                    <td class="clickable">test</td>
                <td>
                    <button type="button" class="btn-warning btn-action"
                        onclick="window.location='@routes.CaseController.editCase(ach_case.id)';">test</button>
                </td>
            </tr>

    </tbody>
</table>

【讨论】：

谢谢，我还在使用与可点击数据相关联的 html 数据属性，这是我能够开始工作的唯一解决方案，并且仍然可以很好地运行。

【解决方案2】：

将no-clickable 类添加到您不想被点击的任何表格单元格中：

$(document).on('click', 'tr:not(.no-clickable)', function() {
   alert('clicked!');
});

tr:not(.no-clickable) th,
tr:not(.no-clickable) td { cursor:pointer }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr><th>1</th><td>Clickable row</td></tr>
    <tr><th>2</th><td>Clickable row</td></tr>
    <tr><th>3</th><td>Clickable row</td></tr>
    <tr><th>4</th><td>Clickable row</td></tr>
    <tr><th>5</th><td>Clickable row</td></tr>
    <tr class="no-clickable"><th>6</th><td>No clickable row</td></tr>
  </tbody>
</table>

注意

您不能将 div 元素放在 tr 元素之后。而是将任何你想要的东西放在 td 或 th 元素中

【讨论】：

【解决方案3】：

试试这个代码：

$(document).on('click', 'tr:not(tr:last-child)', function() {
   alert('clicked!');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr><th>1</th><td>Clickable row</td></tr>
    <tr><th>2</th><td>Clickable row</td></tr>
    <tr><th>3</th><td>Clickable row</td></tr>
    <tr><th>4</th><td>Clickable row</td></tr>
    <tr><th>5</th><td>Clickable row</td></tr>
    <tr><th>6</th><td>No clickable row</td></tr>
  </tbody>
</table>

【讨论】：