javascript - 如何通过jquery中的选择器跳过任何表列？

Question

我正在从每个表行创建获取值，并使用 Jquery 传递到另一个 html 元素。

我的问题我无法跳过最后一列

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

我的#modalAds和另一个变量，当点击tr时，将所有值传递给这些选择器，我想跳过包含tr的最后一列>.td_disable 选择器，但我不会跳过它。

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

Answer 1

有 2 个问题，您正在向每个 tr 添加一个新的点击处理程序每次鼠标移到不需要的表格上时， elemnet 都会出现。

因为您不想定位最后一个 td ，我认为定位 td 会更好而不是 tr点击处理程序的元素。

$(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);
});

<小时/>

如果您仍想定位tr对于点击，然后检查点击是否发生在 td.td_diable 内使用event.target喜欢

$(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);
});