如何使用jQuery查找最接近的表格行？

Question

我在获取替换新表行的值时遇到问题，我将让您显示替换新表行的代码。

是表B，此代码用于将新表行替换为表A

    $('#edit_chainingBuild').on('click','tr.clickable-row',function(e){

      $('table#edit_chainingBuild tr').removeClass('selected');
      $(this).addClass('selected');

      var find_each_id_will_update = $(this).find('.data-attribute-chain-id').attr('data-attribute-chain-id');
      $('.id_to_update_chain').val(find_each_id_will_update);

      var find_each_id_condiments = $(this).find('.data-attribute-chain-id').attr('data-attribute-condiments-section-id');

      $.ajax({
        url:'/get_each_id_section_condiments',
        type:'get',
        data:{find_each_id_condiments:find_each_id_condiments},
        success:function(response){

          var get_each_section = response[0].condiments_table;


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

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

            var cat_condi_screen_name = stringify['cat_condi_screen_name'];
            var cat_condi_price = stringify['cat_condi_price'];
            var cat_condi_image = stringify['cat_condi_image'];
            var condiment_section_name = stringify['condiment_section_name'];
            var image = '<img src=/storage/' + cat_condi_image + ' class="responsive-img" style="width:100px;">';

            // $('#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>");

            $('table#edit_table_chaining_condiments').append("<tr class='edit_condimentsClicked' style='font-size:14px; border:none;'><td>"+condiment_section_name  +"</td><td class='edit_condimentsScreenNameClicked'>" + cat_condi_screen_name + "</td><td class='edit_condimentsScreenPriced'>" + cat_condi_price + "</td><td>"+image+"</td></tr>");

          });

          $("table#edit_table_chaining_condiments tr").click(function(e){


             var tableBhtml =  $(this).closest('tr').html();

              var condiments_name = $(this).closest("tr").find(".edit_condimentsScreenNameClicked").text();
              var condimentsScreenPriced = $(this).closest("tr").find(".edit_condimentsScreenPriced").text();
              // var input = '<input type="number"  id="qty" name="qty" class="form-control changeQuantity" value="1" min="1">';
              var id_to_edit_build = $('.id_to_update_chain').val();

              $("#edit_chainingBuild tr.selected").html('');
              var id_to_edit_builders = $('.id_to_update_chain').val();

              $("#edit_chainingBuild tr.selected").replaceWith("<tr data-attribute-chain-id=" + id_to_edit_build + " class='clickable-row'><td class='new_condiments_name'>"+condiments_name+"</td><td>"+condimentsScreenPriced+"</td><td style='display:none;' data-attribute-chain-id="+id_to_edit_builders +" class='data-attribute-chain-id'>"+id_to_edit_builders+"</td></tr>");

              $('#EditcondimentsBuilderModal').modal('hide');

          });


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

      $('#EditcondimentsBuilderModal').modal('show'); 


});

展望表行是否已替换，我想获取new_condiments_name类的new_condiments_name 。 因此，我创建了一个变量来查找new_condiments_name的类。 看起来像这样。

var new_condiments_name = $(this).closest("tr").find(".new_condiments_name").text();

因此，现在当我尝试使用click函数提醒变量new_condiments_name ，它仅显示为null。

$('.edit_build_success_insert').click(function(){
      var new_condiments_name = $(this).closest("tr").find(".new_condiments_name").text();
      alert(new_condiments_name);
});

我的HTML表格：

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

我在这里有图像来证明我得到的值始终为空。

Answer 1

$('table .edit_build_success_insert').click(function(){
      var new_condiments_name = $(this).closest("tr").find(".new_condiments_name").text();
      alert(new_condiments_name);
});