Question posted in
You can find the official documentation here.

Jquery ajax – jquery select entire row except last column

I have a table like this :

enter image description here

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

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    Use stopPropagation on click of the details button:

    $("#tablelist tr").click(function () {...})
$("#tablelist tr a").click(function (e) { e.stopPropagation() })
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search