How to make part of a table row clickable with JQuery

Question

I want all but the last <td> element in each table row to be one clickable unit. Here is what I have:

<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");
    });
});

This doesn't do anything. I'm very tired so hopefully this is just a simple problem.

Answer 1

I changed the code a bit to demonstrate - adding an alert instead of the console.log, but one way to do it is to add a class of clickable to each <td> except for the last one that houses the button. You could add the clickable class to the <tr> , but you still have to prevent the effect on the last <td> of each <tr> - better just to add the clickable class to the <td> 's that you want to include rather than adding it to the entire row and excluding the last <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

Add the no-clickable class to any table cell you want not to be 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> 

NOTE

You can not place a div element right after a tr element. Instead place anything you want inside td or th elements

Answer 3

Try this code :

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