javascript - 仅使用一个按钮 OnClick AJAX 更新多个字段

Question

我这里的代码只更新“onblur”事件的特定字段。我想要的是只需单击一下按钮即可更新整行。这些值来自 1.php 中的“td”，并将通过页面 2.php 更新

脚本

$(document).on('blur', '.id', function(){  
    var id = $(this).data("id10");  
    var id1 = $(this).text();  
    edit_data(id, id1, "id");
});
$(document).on('blur', '.firstname', function(){  
    var id = $(this).data("id1");  
    var firstname = $(this).text();  
    edit_data(id, firstname, "firstname");  
});  
$(document).on('blur', '.middlename', function(){  
    var id = $(this).data("id2");  
    var middlename = $(this).text();  
    edit_data(id,middlename, "middlename");  
});  
$(document).on('blur', '.lastname', function(){  
    var id = $(this).data("id3");  
    var lastname = $(this).text();  
    edit_data(id, lastname, "lastname");  
});  
$(document).on('blur', '.address', function(){  
    var id = $(this).data("id4");  
    var address = $(this).text();  
    edit_data(id,address, "address");  
}); 
$(document).on('change', '.gender', function(){  
    var id = $(this).data("id5");  
    var gender = $(this).val(); 
    edit_data(id,gender, "gender");  
}); 
$(document).on('blur', '.contact', function(){  
    var id = $(this).data("id6");  
    var contact = $(this).text();  
    edit_data(id, contact, "contact");  
});  
$(document).on('blur', '.username', function(){  
    var id = $(this).data("id7");  
    var username = $(this).text();  
    edit_data(id,username, "username");  
}); 

$(document).on('blur', '.password', function(){  
    var id = $(this).data("id8");  
    var password = $(this).text();  
    edit_data(id,password, "password");  
}); 
function edit_data(id, text, column_name)  
{  
   $.ajax({  
        url:"2.php",  
        method:"POST",  
        data:{id:id, text:text, column_name:column_name},  
        dataType:"text",  
        success:function(data){  
             alert(data);  
        }  
   });  
} 

1.php

$output .= '  
<tr class="datas"> 

     <td class="id" data-id10="'.$row["id"].'" contenteditable>'.$row["id"].'</td>
     <td class="firstname" data-id1="'.$row["id"].'" contenteditable>'.$row["firstname"].'</td>  
     <td class="middlename" data-id2="'.$row["id"].'" contenteditable>'.$row["middlename"].'</td>  
     <td class="lastname" data-id3="'.$row["id"].'" contenteditable>'.$row["lastname"].'</td> 
     <td class="address" data-id4="'.$row["id"].'" contenteditable>'.$row["address"].'</td> 
     <td id="gender">
     <select class="gender" onchange="getval(this)" data-id5="'.$row["id"].'" >
        <option value="Male" ' . ( $row["gender"]=='Male' ? 'selected' : '' ) . '>Male</option>
        <option value="Female" ' . ( $row["gender"]=='Female' ? 'selected' : '' ) . '>Female</option>
     </select>
     </td>
     <td class="contact" data-id6="'.$row["id"].'" contenteditable>'.$row["contact"].'</td> 
     <td class="username" data-id7="'.$row["id"].'" contenteditable>'.$row["username"].'</td> 
     <td class="password" data-id8="'.$row["id"].'" contenteditable>'.$row["password"].'</td> 

     <td class="but"><button type="button" name="delete_btn" id="delete_btn" data-id9="'.$row["id"].'" class="btn btn-xs btn-danger btn_delete">DELETE</button>
      <button type="button" name="delete_btn" id="update_btn" data-id12="'.$row["id"].'" onclick="update(this.id)">UPDATE</button>
      </td>
</tr>';  

2.php

$id = $_POST["id"];  
$text = $_POST["text"];  
$column_name = $_POST["column_name"]; 

$sql = "UPDATE agents SET ".$column_name."='".$text."' WHERE id='".$id."'";  
if(mysqli_query($conn, $sql))  
{  
    echo 'Data Updated';  
}

Answer 1

您需要做的最少更改是触发您已经在单击按钮时声明的事件。

$('button').on('click', function () {
    // in the row below, just enter the ids, classes, or other selectors you want, then trigger the even by name (blur, change, focus, ...)
    $('.id,.gender,.contact,...' ).triggerHandler( 'blur' );
})