jquery post - 更新db - 多行

Question

我不确定我想要做的是简单与否，但它在这里：

我在表中有行数据。最后3个字段是用户输入的文本字段。每一行都有它自己的UPDATE按钮。

我使用下面的代码来尝试和做一个jQuery .ajax后，但我看到我的问题 - 我分配ID到我的输入字段，你只能有一个ID每页声明，所以我肯定这是一个问题。

我试图做到这一点，当你点击UPDATE按钮时，它将传递来自INPUT框中该行的变量和rowID的隐藏INPUT字段，并调用更新数据库的.php文件。

$(function() { 
    $(".submit").click(function() { 
     var status = $("#status").val(); 
     var ly = $("#ly").val(); 
     var rt = $("#rt").val(); 
     var offerout = $("#offerout").val(); 
     var lineid = $("#lineid").val(); 
     var dataString = 'status='+ status + '&ly=' + ly + '&rt=' + rt + '&offerout=' + offerout + '&lineid=' + lineid; 

     $.ajax({ 
      type: "POST", 
      url: "post/updatedata.php", 
      data: dataString, 
      success: function(){ 
       $('.success').fadeIn(200).show(); 
       $('.error').fadeOut(200).hide(); 
      } 
     }); 

     return false; 
    }); 
}); 

，并在我的表格线（每条线是一样的，但有不同的隐藏标识变量）：

<form method="POST" name="form"> 
<td>This one</td><td>Los Angeles</td> 
<td>CA</td><td>94591</td> 
<td>220000</td> 
<td>20000</td><td>24500</td> 
<td>-5500</td><td>12</td> 
<td>0</td><td>0.167</td><td>4</td> 
<td>1</td><td>1898</td> 
<td></td><td>1</td><td>211335190</td> 
<td><input size="6" type="text" id="status" name="status"></td> 
<td><input size="6" type="text" id="ly" name="ly"></td> 
<td><input size="6" type="text" id="rt" name="rt"></td> 
<td><select id="offerout" name="offerout"><option value="No">No</option><option value="Yes">Yes</option></select></td> 
<input type="hidden" name="lineid" id="lineid" value="97"> 
<td><input type="submit" class="submit" value="Update"></td> 
</form> 

在此先感谢，一直致力于在这个日子！

Answer 1

我删除隐藏的字段，并指定数据库ID更新按钮，因为按钮将单击获取该ID和corespondent数据。

<table width="100%" border="1" cellspacing="0" cellpadding="0"> 

    <tr> 
    <form method="POST" name="form"> 
     <td>CA</td><td>94591</td> 
     <td>220000</td> 
     <td>20000</td><td>24500</td> 
     <td>-5500</td><td>12</td> 
     <td>0</td><td>0.167</td><td>4</td> 
     <td>1</td><td>1898</td> 
     <td></td><td>1</td><td>211335190</td> 
     <td><input size="6" type="text" id="status_97" name="status"></td> 
     <td><input size="6" type="text" id="ly_97" name="ly"></td> 
     <td><input size="6" type="text" id="rt_97" name="rt"></td> 
     <td><select name="offerout" id="offerout_97"><option value="No">No</option><option value="Yes">Yes</option></select></td> 
     <td><input type="submit" class="submit" value="Update" name="97"></td> 
    </form> 
    </tr> 

    <tr> 
    <form method="POST" name="form"> 
     <td>CA</td><td>94591</td> 
     <td>220000</td> 
     <td>20000</td><td>24500</td> 
     <td>-5500</td><td>12</td> 
     <td>0</td><td>0.167</td><td>4</td> 
     <td>1</td><td>1898</td> 
     <td></td><td>1</td><td>211335190</td> 
     <td><input size="6" type="text" id="status_96" name="status"></td> 
     <td><input size="6" type="text" id="ly_96" name="ly"></td> 
     <td><input size="6" type="text" id="rt_96" name="rt"></td> 
     <td><select name="offerout" id="offerout_96"><option value="No">No</option><option value="Yes">Yes</option></select></td> 
     <input type="hidden" name="lineid" id="lineid_96" value="96"> 
     <td><input type="submit" class="submit" value="Update" name="96"></td> 
    </form> 
    </tr> 

</table> 

Java脚本代码

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
<script> 
    $(function() { 
    $(".submit").click(function() { 

     var rowToUpdate = $(this).attr('name'); 

     var status = $("#status_"+rowToUpdate).val(); 
     var ly = $("#ly_"+rowToUpdate).val(); 
     var rt = $("#rt_"+rowToUpdate).val(); 
     var offerout = $("#offerout_"+rowToUpdate).val(); 

     var dataString = 'status='+ status + '&ly=' + ly + '&rt=' + rt + '&offerout=' + offerout + '&rowToUpdate='+ rowToUpdate; 

     $.ajax({ 
      type: "POST", 
      url: "post/updatedata.php", 
      data: dataString, 
      success: function(){ 
       $('.success').fadeIn(200).show(); 
       $('.error').fadeOut(200).hide(); 
      } 
     }); 

     return false; 
    }); 
}); 
</script> 

我希望这将帮助你..

Answer 2

您可以在每个提交中存储一个行号数据变量，并使用它来确定哪个行被点击，从而确定哪些输入需要从中提取值。

$(function() { 
    $(".submit").each(function() { 
     var rowNum = $(this).attr('data-rownum'); 
     $(this).click(function() { 
      var status = $("#status" + rowNum).val(); 
      var ly = $("#ly" + rowNum).val(); 
      var rt = $("#rt" + rowNum).val(); 
      .... 
     }); 
    }); 
}); 

<form method="POST" name="form"> 
.... 
<td><input size="6" type="text" id="status1" name="status"></td> 
<td><input size="6" type="text" id="ly1" name="ly"></td> 
<td><input size="6" type="text" id="rt1" name="rt"></td>  
<input type="hidden" name="lineid" id="lineid1" value="97"> 
<td><input type="submit" class="submit" value="Update" data-rownum="1"></td> 
</form> 

Answer 3

复制id属性会导致问题。当你说$("#ly")时，你可能会得到页面上的第一个，通常不是你想要的。这很容易解决：

• 删除id属性而赞成class属性。您也可以使用attribute selectors。
• 调整你的jQuery选择器去up to an ancestor和come back down到你想要的东西。

首先HTML：

<td><input size="6" type="text" class="status" name="status"></td> 
<td><input size="6" type="text" class="ly" name="ly"></td> 
<td><input size="6" type="text" class="rt" name="rt"></td> 
<td><select class="offerout" name="offerout"><option value="No">No</option><option value="Yes">Yes</option></select></td> 
<input type="hidden" name="lineid" class="lineid" value="97"> 

那么你的jQuery：

var $form = $(this).closest('form'); 
var status = $form.find(".status").val(); 
var ly  = $form.find(".ly").val(); 
var rt  = $form.find(".rt").val(); 
var offerout = $form.find(".offerout").val(); 
var lineid = $form.find(".lineid").val(); 

而且，因为你正在做一个POST请求，你应该刚刚到手的jQuery的对象，让它操心序列化它：

var data = { 
    status: status, 
    ly:  ly, 
    rt:  rt, 
    offerout: offerout, 
    lineid: lineid 
}; 
$.ajax({ 
    type: "POST", 
    url:  "post/updatedata.php", 
    data: data, 
    success: function() { 
     $('.success').fadeIn(200).show(); 
     $('.error').fadeOut(200).hide(); 
    } 
}); 

这应该照顾你的cl客户端问题。