jquery select entire row except last column

Question

I have a table like this :

When I click on a row, entire row are selected. For example in the image above the second row is selected. After selecting the row the name and family are displayed in the bottom of table.

If you look at the jquery code, the ajax commands are used. The problem is that when i click the Details button on each row , the Ajax scripts will run. How do i click a button without executing Ajax code?

 $("#tablelist tr").click(function () { $(this).addClass('selected').siblings().removeClass('selected'); $("#selectedUser").html("Selected User : " + $(this).find('td').eq(1).html() + ' ' + $(this).find('td').eq(2).html()); $.ajax({ //some code }); });

 .selected { background-color: blue; color: white; color: #FFF; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <thead> <tr> <td>rows</td> <td>name</td> <td>family</td> <td>username</td> <td>Jobs</td> </tr> </thead> <tbody id="tablelist"> @foreach (var item in TableList) { <tr style="font-size:13px;"> <td>@counter</td> <td>@item.FirstName</td> <td>@item.Family</td> <td>@item.UserName</td> <td> <a href="Controller/Action?id="+ @item.id">Details</a> </td> </tr> } </tbody>

Answer 1

Use stopPropagation on click of the details button:

$("#tablelist tr").click(function () {...})
$("#tablelist tr a").click(function (e) { e.stopPropagation() })

Answer 2

You are binding your listener to the whole row, so you can't exclude part of it.

Instead, try binding to the cells you need. Instead of:

$("#tablelist tr")

Try

$("#tablelist td:not(:last-child)")

Just be aware that if you have space in your row that is not a cell, it won't fire the event. You can likely adjust padding and margins to resolve this.