Onclick 事件更新表值一次，但从不显示第二次 onclick 事件更新时的更新值

Question

我有一个只显示人名的表格，我想通过选中我要更改的名称的复选框来更新表格中显示的名称，并通过模态编辑表单显示它。将更新后的名称放入模态编辑表单的名称字段并单击更新按钮后，表格中的名称也将在不加载页面的情况下更新。第一个名称更新有效，但第二个更新从未显示在表中。我怎样才能使它工作，以便我在模态编辑表单中所做的每一个更改也将显示在表格中而无需页面加载？请帮忙。非常感谢您的帮助。谢谢你。这是我的代码和图片。

模态编辑表单

<div class="modal fade bs-example-modal-lg edit-entity-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
 <div class="modal-content" style="background-color: #343D46;">
  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true" style="color: #fff;">&times;</span></button>
    <h2 style="padding:10px; color: #fff;">Post Activity Report Edit Form</h2>
        <address></address>
        <form class="form-horizontal par-form-edit" id="par-form-edit" style="background-color: #e2e2e2;" method="post" enctype="multipart/form-data">
          <fieldset>

            <div class="alert alert-dismissable alert-success alert-editName-success">
              <button type="button" class="close" data-dismiss="alert">×</button>
              <center><h4>Data successfully updated.</h4></center>
            </div>

            <address></address>

           <div class="form-group">
              <label for="inputName" class="col-lg-2 control-label">Name</label>
              <div class="col-lg-10">
                <input type="text" class="form-control" name="par[name]" id="name_edit" placeholder="Name" value="" style="width:260px;height:40px;" required>
              </div>
            </div>

             <div class="form-group">
              <div class="col-lg-10 col-lg-offset-2">
                <button type="submit" class="btn btn-primary update-name">Update</button>
                <button class="btn btn-default">Cancel</button>
              </div>
            </div>

          </fieldset>
        </form>
</div>

显示名称的表格

<table class="table table-striped table-hover table-entity-contents" id="table-entity-contents">
      <thead style="background-color: #343D46; color: #fff;" id="notify_section">

        <tr>
          <th><input type="checkbox" class="radio_check_all par-checkbox" id="radio_check_all par-checkbox" value="" style="width:18px; height:18px;"></th>
          <th>Name</th>
        </tr>
      </thead>
  <tbody>

            <tr class="tbl-entity-row">
            <td><input type='checkbox' style='width:30px; height:20px;' class='radio_check_all par-id-checkbox' id='radio_check_all par-id-checkbox' value="1"></td>
            <td><?php echo "Jun"; ?></td>           
            </tr>  
  </tbody>
 </table>

更新表格的Javascript

$(".btn-edit-name").click(function(e){
e.preventDefault();
var valArray = [];      

$("input:checkbox:checked").each(function(i){
  valArray[i] = $(this).val();
});

if( valArray > 0 ){

$('#table-entity-contents tr.tbl-entity-row').filter(':has(:checkbox:checked)').each(function() {

    $tr = $(this);
    $('td', $tr).each(function() {


    document.getElementById("name_edit").value = $tr.find('td:eq(1)').html();


        $(".edit-entity-modal").modal({show:true});        

        return false;
     });

     });
   } else{
   alert("Please select a record");
  }

 });


 $(".update-name").click(function(e){

   e.preventDefault();

   var Name = document.getElementById("name_edit").value;

   if( Name != "" ){

      var txt = "",
          entityId = "1";

              txt += "<tr class='tbl-entity-row'><td><input type='checkbox' style='width:30px; height:20px;' class='radio_check_all entity-id-checkbox' id='radio_check_all entity-id-checkbox' value="+entityId+"></td><td>"+Name+"</td></tr>";

              $('#table-entity-contents tr.tbl-entity-row').filter(':has(:checkbox:checked)').replaceWith(txt);

              $(".alert-editName-success").fadeIn(100);
              $(".alert-editName-success").delay(2000).fadeOut(800);

  } else{
     alert("Do not leave name field empty");
  }

 });

模态编辑表单

Onclick 更新按钮和第一个名称更新

Onclick 更新按钮和第二个名称更新回原来的名称

如您所见，第二次名称更新永远不会更改表格中的名称，也显示在后台。它仍然是“Jun Apple”，应该回到原来的名字“Jun”。这是什么问题？

Answer 1

因为第二次您没有选中该复选框，并且您正在使用这一行更新表格

$('#table-entity-contents tr.tbl-entity-row').filter(':has(:checkbox:checked)').replaceWith(txt);

选择并更新带有选中复选框的行。因此，您只需要更改此行

txt += "<tr class='tbl-entity-row'><td><input type='checkbox' style='width:30px; height:20px;' class='radio_check_all entity-id-checkbox' id='radio_check_all entity-id-checkbox' value="+entityId+"></td><td>"+Name+"</td></tr>";

到

txt += "<tr class='tbl-entity-row'><td><input type='checkbox' checked='checked' style='width:30px; height:20px;' class='radio_check_all entity-id-checkbox' id='radio_check_all entity-id-checkbox' value="+entityId+"></td><td>"+Name+"</td></tr>";