Question

我希望除了每个表行中的最后一个<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");
    });
});

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

Answer 1

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

<td>

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

Answer 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>

注意

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

Answer 3

试试这段代码：

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何使用JQuery使表行的一部分可单击

3 个答案: