0

I'm creating get value from each table row and pass to another html element by using Jquery.

My Issue I can't skip the last column

<table id="mytable"> 
    <tbody id="row">
        <tr>
            <td><div id="no">0</div></td>
            <td><a><div class="id">61</div></a></td>
            <td><a><div class="name" onclick="dialogbox(61)">45353</div></a></td>
            <td><a><div class="prices line">345345</div></a></td>
            <td><a><div class="ads_order line"></div></a></td>
            <td><a><div class="des line">asdfasdf</div></a></td>
            <td><div class="viewed line"></div></td>
            <td><div class="status line">1</div></td>
            <td><a class="delete" onclick="deleted(61)"><div class="fa fa-times fa-3"></div></a></td>
        </tr>

        <tr>
            <td><div id="no">1</div></td>
            <td><a><div class="id">62</div></a></td>
            <td><a><div class="name" onclick="dialogbox(62)">asdfasdf</div></a></td>
            <td><a><div class="prices line">4234240</div></a></td>
            <td><a><div class="ads_order line"></div></a></td>
            <td><a><div class="des line">sdfsadfsadfsadfsafd</div></a></td>
            <td><div class="viewed line"></div></td>
            <td><div class="status line">1</div></td>
            <td><a class="delete" onclick="deleted(62)"><div class="fa fa-times fa-3"></div></a></td>
        </tr>

        <tr>
            <td><div id="no">2</div></td>
            <td><a><div class="id">63</div></a></td>
            <td><a><div class="name" onclick="dialogbox(63)">asdfasdf</div></a></td>
            <td><a><div class="prices line">555</div></a></td>
            <td><a><div class="ads_order line"></div></a></td>
            <td><a><div class="des line">sadfasdfas</div></a></td>
            <td><div class="viewed line"></div></td>
            <td><div class="status line">1</div></td>
            <td class="td_diable"><a class="delete" onclick="deleted(63)"><div class="fa fa-times fa-3"></div></a></td>
        </tr>
    </tbody>
</table>

My #modalAds and another variables with initial when tr was clicked and pass all the values to those selector and I want to skip the last column which contain the .td_disable selector but it is not skip for me.

<script>
    $(document).on('mouseover', "table#mytable", function (){
        $("tr:not('[class^=td_diable]')").click(function () {
            $('#modalAds').modal('show');
//          var index = $("tr", $("#mytable").closest("table")).index(this); to find row index inside of table
            $("#p_name").val($(this).find("td a div.name").text());
            $("#p_price").val($(this).find("td a div.prices").text());
            $("#p_addr").val($(this).find("td a div.addr").text());
            $("#p_des").val($(this).find("td a div.des").text());prices + ads_orders + des + viewed + status);
        });
    });
</script>

5 Answers 5

2

There are 2 problems, you are adding a new click handler to each tr elemnet every time mouse is moved over the table that is not required.

Since you don't want to target the last td, I think it will be better to target the td instead of the tr element for the click handler.

$(document).on('click', "#mytable td:not(.td_diable)", function () {
    var $tr = $(this).closest('tr');
    $('#modalAds').modal('show');
    $("#p_name").val($tr.find("td a div.name").text());
    $("#p_price").val($tr.find("td a div.prices").text());
    $("#p_addr").val($tr.find("td a div.addr").text());
    $("#p_des").val($tr.find("td a div.des").text());
    prices + ads_orders + des + viewed + status);
});

If you still want to target the tr for the click, then check whether the click had happened inside the td.td_diable using event.target like

$(document).on('click', "#mytable tr", function (e) {
    if ($(e.target).closest('.td_diable').length) {
        return;
    }
    var $tr = $(this);
    $('#modalAds').modal('show');
    $("#p_name").val($tr.find("td a div.name").text());
    $("#p_price").val($tr.find("td a div.prices").text());
    $("#p_addr").val($tr.find("td a div.addr").text());
    $("#p_des").val($tr.find("td a div.des").text());
    //prices + ads_orders + des + viewed + status);
});
3
  • Your code is working for me because my html was respond my ajax so I have to call $(document) and I used tr for target click. Thanks
    – DMS-KH
    Jun 25, 2015 at 3:29
  • Your code is $('#mytable').on('click', "td:not(.td_diable)", function () { is not work but the last one is work
    – DMS-KH
    Jun 25, 2015 at 3:35
  • 1
    @Cambodiachannel then $(document).on('click', "#mytable td:not(.td_diable)", function () {...}) Jun 25, 2015 at 3:36
2
  1. You need to use .has() over not() to filter according to childen elements' attributes.

    $("tr:not(:has(.td_diable)")
    
  2. Don't define the click inside mouseover handler. You can use $("#myTable tr:not(:has(.td_diable)") instead.

  3. Instead of [class=".."] attribute selector, .className is a better selector.

2

You should add the classname to the tag tr, not to td. In other words, it should be:

<tr class="td_diable">
    <td><div id="no">2</div></td>
    <td><a><div class="id">63</div></a></td>
    <td><a><div class="name" onclick="dialogbox(63)">asdfasdf</div></a></td>
    <td><a><div class="prices line">555</div></a></td>
    <td><a><div class="ads_order line"></div></a></td>
    <td><a><div class="des line">sadfasdfas</div></a></td>
    <td><div class="viewed line"></div></td>
    <td><div class="status line">1</div></td>
    <td ><a class="delete" onclick="deleted(63)"><div class="fa fa-times fa-3"></div></a></td>
</tr>
1

This selector $("tr:not('[class^=td_diable]')") is for a tr. But you are applying td_diable for td.

1

Instead of $("tr:not('[class^=td_diable]')").click use an alternative like

$("td").not($("tr:last").find("td:last")).click
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.