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客戶端問題。