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

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>添加一个可单击类，但最后一个容纳按钮的除外。 您可以将clickable类添加到<tr> ，但是仍然必须防止对每个<tr>的最后一个<td>产生影响-最好仅将clickable类添加到想要的<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> 

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> 

注意

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

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