Jquery更新mysql表

Question

我在使用Jquery更新MySQL行时遇到问题。

这是我当前的代码。

<script type="text/javascript">
$(document).ready(function(){
$(".insert").click(function(){

var id=$("#id").val();
var ip=$("#ip").val();
var permissions=$("#permissions").val();
var password=$("#password").val();
var key=$("#key").val();

$.post('myscript.php?action=updateAPIuser', {id: id, ip: ip, permissions: permissions,     password: password, key:key },
function(data){
$("#message").html(data);
$("#message").hide();
$("#message").fadeIn(1500); 
});
return false;
});
});   
</script>

这是html：

<table width="100%" border="0" cellspacing="1" cellpadding="3">
<tr>
<th>Customer</th>
<th>Permission</th>
<th>IP</th>
<th>Key</th>
<th>Password</th>
<th>Date added</th>
<th>Action</th>
</tr>
<tr class="record" id="record-1"><td>John Doe</td>
<td><select id="permissions" name="permissions" />
<option value="ro" selected>Read Only</option>
<option value="rw">Read Write</option>
</select></td>
<td><input type="text" id="ip" name="ip" value="1.1.1.13">
<input type="hidden" id="id" name="id" value="1"></td>
<td><input type="text" id="key" name="key" value="mijnkey"></td>
<td><input type="text" id="password" name="password" value="password000"></td>
<td>2012-10-24 20:48:25</td><td><a class="insert" title="Update data" href="#"><img src="images/icons/save.png" title="Save" alt="Save"></a> 
</td></tr>

<tr class="record" id="record-2"><td>Jane Doe</td>
<td><select id="permissions" name="permissions" />
<option value="ro" selected>Read Only</option>
<option value="rw">Read Write</option>
</select></td>
<td><input type="text" id="ip" name="ip" value="2.2.1.13">
<input type="hidden" id="id" name="id" value="1"></td>
<td><input type="text" id="key" name="key" value="janeskey"></td>
<td><input type="text" id="password" name="password" value="pass000"></td>
<td>2012-10-24 20:48:25</td><td><a class="insert" title="Update data" href="#"><img src="images/icons/save.png" title="Save" alt="Save"></a> 
</td></tr>
</table>

当然，我使用php来更新MySQL行。

问题是这样的:当我单击Save (也称为Update)时，Jquery总是更新ID为1的行，无论我单击哪一行。

因此，我的问题是:如何更改代码，以便正确的行获得更新？

干杯，Hub

PS这是我用来更新行的PHP代码：

function updateAPIuser($req){
global $db_whmcs, $_LANG;    

$id = $req['id'];
$ip = $req['ip'];
$permissions = $req['permissions'];
$password = $req['password'];
$key = $req['key'];
$updated = date("Y-m-d H:i:s");

header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); // Date in the past
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); // always modified
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0"); // HTTP/1.1
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache"); // HTTP/1.0



  $query = "UPDATE `mod_powerdns_api` SET 
`ip` = '".$ip."',
`key` = '".$key."',
`permissions` = '".$permissions."',
`updated` = '".$updated."', 
`password` = '".$password."' 
WHERE `id` = ".$id;

mysql_query($quer) or pdns_die('Can not update user'.mysql_error());

} //结束

Answer 1

首先，你不应该使用重复的id。

来自http://www.w3schools.com/tags/att_global_id.asp

的定义和用法

id属性为HTML元素指定唯一的id (该值在HTML文档中必须是唯一的)。

您可以使用以下代码获取正确的id：

var id = $(this).find('[name="id"]').val();

其他元素也可以通过相同的方式找到：

$(".insert").bind('click', function(){
    var tr = $(this).parents('tr');

    var id = tr.find('[name="id"]').val();
    var ip = tr.find('[name="ip"]').val();
    var permissions = tr.find('[name="permissions"] option:selected').val();
    var password = tr.find('[name="password"]').val();
    var key = tr.find('[name="key"]').val();
});

Answer 2

代码中的问题是因为HTML中存在重复的‘id’

在这种情况下，您可以使用类..尝试完全删除id属性..

试试这个方法..

$(".insert").click(function(clickmychick){

    var $tr = $(this).closest('tr') ;  // Cache the closest tr

    var id= $tr.find('[name="id"]')val();
    var ip= $tr.find('[name="ip"]')val();
    var permissions=$tr.find('[name="permissions"] option:selected').attr('value');
    var password= $tr.find('[name="password"]')val();
    var key= $tr.find('[name="key"]')val();
}