如何通过使用jQuery单击表行来选择最后一个表数据？

Question

我有一个关于添加一个类的问题（选择到表行，除了最后一个表数据）

首先，通过单击编辑按钮，将出现模态，响应将附加到表中。

现在我想实现，如果我点击表格行我想要突出显示它除了表格数据的最后一个子节点。我在这里有我的代码和我的样本输出，我会告诉你们。

这是我已经附加的表格，现在我选择了第一个表格行，但问题是，通过点击表格行，我不想突出显示最后一个孩子因为最后一个孩子有其他功能目的。

这是我的附加函数，用于将响应放在表中。

    $(document).ready(function(){
  $('button#chain_editBtn').click(function(){

        $('#EditchainingBuilderModal').modal('show');
        $("button#show_nounModalChain").attr('disabled', true);

        var get_chain_id = $(this).val();
        $('.edit_hidden_noun_id').val(get_chain_id);

        $.ajax({
            url:'/get_chain_data',
            type:'get',
            data:{get_chain_data_id: get_chain_id},
            success:function(response){

              var get_chain_name = response[0].get_chain_name[0].chain_name;
              var menu_builder_properties_id = response[0].get_chain_name[0].menu_builder_properties_id;

              $('.edit_hidden_noun_id').val(menu_builder_properties_id);
              $('.edit_noun_build_item').text(get_chain_name);


               var get_chain_data = response[0].get_chain_data;


               $.each(get_chain_data, function (index, el) {

                var stringify = jQuery.parseJSON(JSON.stringify(el));

                var menu_cat_price = stringify['menu_cat_price'];
                var Qty = stringify['Qty'];
                var Price = stringify['Price'];
                var Condiments = stringify['Condiments'];
                var menu_builder_details_id = stringify['menu_builder_details_id'];
                var condiments_section_id = stringify['condiments_section_id'];


                // $('#edit_chainingBuild').append("<tr class='clickable-row'><td>" + Qty + "</td><td class='clickable-row-condiments'>" + Condiments + "</td><td>" + Price + "</td><td style='display:none;' data-attribute-chain-id="+menu_builder_details_id +" class='data-attribute-chain-id'>"+menu_builder_details_id+"</td></tr>");
                $('#edit_chainingBuild').append("<tr class='clickable-row'><td class='clickable-row-condiments'>" + Condiments + "</td><td>" + Price + "</td><td style='display:none;' data-attribute-condiments-section-id="+condiments_section_id+" data-attribute-chain-id="+menu_builder_details_id +" class='data-attribute-chain-id'>"+menu_builder_details_id+"</td><td><button>X</button></td></tr>");

              })

            },
            error:function(){
              console.log(response);
            }
        })




  })
})

现在我有点击功能的代码来突出显示表格行。

$('#edit_chainingBuild').on('click','tr.clickable-row','td:not(:last-child)',function () {

    $(this).addClass('selected');
});

我的Html表格代码：

<div class="modal fade" id="EditchainingBuilderModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true" data-keyboard="false" data-backdrop="static">
  <div class="modal-dialog modal-lg role="document" style="float:right; height:700px; width:490px; ">
    <div class="modal-content">
          <div class="modal-header" style="background: linear-gradient(-30deg, #00e4d0, #5983e8); color:white;">
            <h5 class="modal-title edit_noun_build_item" id="exampleModalLongTitle" style="color:white;"></h5>
            <button type="button" class="close" id="closeBuildChainUpdate" data-dismiss="modal" aria-label="Close" style="">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>

          <div class="modal-body">

            <div class="container">
                <div class="header" style="text-align: center;">
                    <br>
                    <h3 style="color:#007BFF;">Build Your Chain Button</h3> 
                    <label>This button will be served as customers menu.</label><br>
                    <i class="fab fa-creative-commons-remix" style="font-size:70px;"></i>
                    <br><br>

                    <input type="hidden" value="" class="edit_hidden_noun_id" name="">
                    <table class="table table-hover" id="edit_chainingBuild">
                        <thead>
                            <tr style="font-size: 15px;">
                                <!-- <th scope="col">Qty</th> -->
                                <th scope="col">Condiments</th>
                                <th scope="col">Price</th>
                            </tr>
                        </thead>
                        <tbody style="font-size:14px;">                 

                        </tbody>
                    </table>
                </div>
            </div>

          </div>
          <div class="modal-footer">
            <button type="button" class="edit_build_success_insert btn btn-primary">Build Done</button>
          </div>
    </div>
  </div>
</div>

Answer 1

$('#edit_chainingBuild').on('click',function () {
    $(this).closest('tr.clickable-row').find('td:not(:last-child)').addClass('selected');
});

Answer 2

这段代码解决了我的问题

 $('#edit_chainingBuild').on('click','tr.clickable-row',function () {
          $(this).closest('tr.clickable-row').find('td:not(:last-child)').addClass('selected');
    });

Answer 3

这是一种你可以做到的简单方法。希望能帮助到你。

$('td').click((event) => {
  const parentRow = $(event.target).parent();
  parentRow.addClass('selected');
  $('tr').not(parentRow).removeClass('selected');
})

body {
  background-color: blue;
}

tr {
  background-color: red;
  cursor: pointer;
}

.selected {
  background-color: yellow
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <body>
    <table>
      <tbody>
        <tr>
          <td>Call 1</td>
          <td>Call 1</td>
          <td>Call 1</td>
        </tr>
        <tr>
          <td>Call 1</td>
          <td>Call 1</td>
          <td>Call 1</td>
        </tr>
        <tr>
          <td>Call 1</td>
          <td>Call 1</td>
          <td>Call 1</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>