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");
  }

 });

模态编辑表单

点击更新按钮和第一名称更新

点击更新按钮，第二个名称更新回原始名称

正如您所看到的，第二个名称更新永远不会更改表格中的名称，也会在后台显示。它仍然是“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>";

Onclick事件更新表值一次但从未在第二次onclick事件更新

1 个答案: