动态表JS

Question

我已经编写了好的PHP代码，通过Ajax请求去了。当我点击编辑时，它出现在输入行，我输入数据，它们被发送到服务器，但是这个输入没有被删除。表的行应返回初始状态，但已经包含已更改的数据。删除行时出现同样的问题，当您单击删除时，数据将从数据库中删除，但前端没有任何反应。 链接代码https://codepen.io/alekspvn/pen/EwwwrZ抱歉这里有php代码） 如果有不可读的，那么我在这里输入代码

HTML

<table align="center" cellpadding="10" border="1" id="user_table">
<tr>
<th>Title</th>
<th>Anonce</th>
<th>Url</th>
<th>Action</th>
</tr>
<?php
 foreach($eq_arr as $row):
 ?> 

  <tr id="row<?php echo $row->id;?>">
  <td id="title_val<?php echo $row->id;?>"><?php echo $row->title;?></td>
  <td id="anonce_val<?php echo $row->id;?>"><?php echo $row->anonce;?></td>
  <td id="url_val<?php echo $row->id;?>"><?php echo $row->url;?></td>
  <td>
   <input type='button' class="edit_button" id="edit_button<?php echo $row->id;?>" value="edit" onclick="edit_row('<?php echo $row->id;?>');">
   <input type='button' class="save_button" id="save_button<?php echo $row->id;?>" value="save" onclick="save_row('<?php echo $row->id;?>');">
   <input type='button' class="delete_button" id="delete_button<?php echo $row->id;?>" value="delete" onclick="delete_row('<?php echo $row->id;?>');">
  </td>
 </tr>
 <?php
endforeach;
?>

<tr id="new_row">
 <td><input type="text" id="new_title"></td>
 <td><input type="text" id="new_anonce"></td>
 <td><input type="text" id="new_url"></td>
 <td><input type="button" value="Insert Row" onclick="insert_row();"></td>
</tr>

</table>

JS

function edit_row(id)
{
 var title=document.getElementById("title_val"+id).innerHTML;
 var anonce=document.getElementById("anonce_val"+id).innerHTML;
 var url=document.getElementById("url_val"+id).innerHTML;

 document.getElementById("title_val"+id).innerHTML="<input type='text' id='title_text"+id+"' value='"+title+"'>";
 document.getElementById("anonce_val"+id).innerHTML="<input type='text' id='anonce_text"+id+"' value='"+anonce+"'>";
 document.getElementById("url_val"+id).innerHTML="<input type='text' id='url_text"+id+"' value='"+url+"'>";

 document.getElementById("edit_button"+id).style.display="none";
 document.getElementById("save_button"+id).style.display="block";
}

function save_row(id)
{
 var title=document.getElementById("title_text"+id).value;
 var anonce=document.getElementById("anonce_text"+id).value;
 var url=document.getElementById("url_text"+id).value;

 jQuery.ajax
 ({
  type:'post',
  url:'../wp-content/plugins/related-equipment/update.php',
  data:{
   edit_row:'edit_row',
   row_id:id,
   title_val:title,
   anonce_val:anonce,
   url_val:url
  },
  success:function(response) {
   if(response=="success")
   {
    document.getElementById("title_val"+id).innerHTML=title;
    document.getElementById("anonce_val"+id).innerHTML=anonce;
    document.getElementById("url_val"+id).innerHTML=url;
    document.getElementById("edit_button"+id).style.display="block";
    document.getElementById("save_button"+id).style.display="none";
   }
  }
 });
}

function delete_row(id)
{
 jQuery.ajax
 ({
  type:'post',
  url:'../wp-content/plugins/related-equipment/update.php',
  data:{
   delete_row:'delete_row',
   row_id:id,
  },
  success:function(response) {
   if(response=="success")
   {
    var row=document.getElementById("row"+id);
    row.parentNode.removeChild(row);
   }
  }
 });
}

function insert_row()
{
 var title=document.getElementById("new_title").value;
 var anonce=document.getElementById("new_anonce").value;
 var url=document.getElementById("new_url").value;

 jQuery.ajax
 ({
  type:'post',
  url:'../wp-content/plugins/related-equipment/update.php',
  data:{
   insert_row:'insert_row',
   title_val:title,
   anonce_val:anonce,
   url_val:url
  },
  success:function(response) {
   if(response!="")
   {
    var id=response;
    var table=document.getElementById("user_table");
    var table_len=(table.rows.length)-1;
    var row = table.insertRow(table_len).outerHTML="<tr id='row"+id+"'><td id='title_val"+id+"'>"+title+"</td><td id='anonce_val"+id+"'>"+anonce+"</td><td id='url_val"+id+"'>"+url+"</td><td><input type='button' class='edit_button' id='edit_button"+id+"' value='edit' onclick='edit_row("+id+");'/><input type='button' class='save_button' id='save_button"+id+"' value='save' onclick='save_row("+id+");'/><input type='button' class='delete_button' id='delete_button"+id+"' value='delete' onclick='delete_row("+id+");'/></td></tr>";
    document.getElementById("new_title").value="";
    document.getElementById("new_anonce").value="";
    document.getElementById("new_url").value="";
   }
  }
 });
}

PHP

global $wpdb;
$table_name = $wpdb->prefix . 'rel_eq';
if ( isset( $_POST['edit_row'] ) ){
    $wpdb->update( $table_name, array(
        'id'=>$_POST['row_id'],
        'title' => $_POST['title_val'], 
        'anonce' => $_POST['anonce_val'],
        'url' => $_POST['url_val']),

    array( 'id' => $_POST['row_id'] ),
        array( '%s', '%s', '%s', '%s') 
    );
     echo mysql_insert_id();
     exit();
}

if ( isset( $_POST['insert_row'] ) ){
    $wpdb->insert( $table_name, array(
        'id'=>$_POST['row_id'],
        'title' => $_POST['title_val'], 
        'anonce' => $_POST['anonce_val'],
        'url' => $_POST['url_val']),
        array( '%s', '%s', '%s', '%s') 
    );
     echo mysql_insert_id();
     exit();
}

if ( isset( $_POST['delete_row'] ) ){
    $wpdb->delete( $table_name, array(
        'id'=>$_POST['row_id']),
        array( '%s') 
    );
     echo mysql_insert_id();
     exit();
}