Question

我在添加类（已选择到表行，最后一个表数据除外）时遇到问题

首先，通过单击“编辑”按钮，将出现模式，并将响应添加到表格中。

现在我要实现，如果我单击表行，则要突出显示该行，但表数据的最后一个子项除外。我这里有代码和示例输出，我将告诉大家。

这是我已经添加的表，现在我选择了第一行，但是问题是，通过单击表行，我不想突出显示最后一个孩子，因为最后一个孩子还有其他作用。

这是我的append函数，用于将响应放入表格中。

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

getComputedStyle(document.getElementById("X")).backgroundColor // #343a40

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>

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

3 个答案: