Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/383.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Onclick事件更新表值一次,但在第二次Onclick事件更新时从不显示更新的值_Javascript_Css_Ajax_Html_Dom - Fatal编程技术网

Javascript Onclick事件更新表值一次,但在第二次Onclick事件更新时从不显示更新的值

Javascript Onclick事件更新表值一次,但在第二次Onclick事件更新时从不显示更新的值,javascript,css,ajax,html,dom,Javascript,Css,Ajax,Html,Dom,我有一个只显示一个人姓名的表格,我想通过选中要更改的姓名复选框并通过模式编辑表单显示来更新表格中显示的姓名。将更新后的名称放入模式编辑表单的名称字段并单击更新按钮后,表中的名称也将在不加载页面的情况下更新。第一个名称更新有效,但第二个更新从未显示在表中。我如何使其工作,以便在没有页面加载的情况下,我在模式编辑表单中所做的每个更改也将显示在表中?请帮忙。非常感谢你的帮助。非常感谢。这是我的代码和图片 模式编辑表单 <div class="modal fade bs-example-modal

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

模式编辑表单

<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>
$(".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”。这是什么问题?

因为在第二次检查中,您没有选中复选框,并且正在使用此行更新表

$('#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>";
它使用选中的复选框选择并更新行。因此,您只需要更改这一行

$('#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+=“Name+”;

txt+=“Name+”;

我只想补充一点,在名称进行第二次修订之前,模式编辑表单没有关闭。非常感谢davcs86