jQuery post-更新数据库-多行

问题描述

| 我不确定我想做的是简单还是简单，但这是： 我在表中有数据行。最后3个字段是接受用户输入的文本字段。每行都有它自己的UPDATE按钮。 我正在使用以下代码尝试执行jQuery

.ajax

帖子，但是我看到了我的问题-我正在为输入字段分配ID，并且每页只能声明一个ID，所以我确保这是一个问题。 我试图这样做，以便当您单击UPDATE按钮时，它将传递INPUT框中该行的变量以及rowID的隐藏INPUT字段，并调用一个“ 1”文件来更新数据库。

    $(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;
    });
});

并在我的表单行中（每行都是相同的，但具有不同的隐藏ID变量）：

<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>

在此先感谢您，已经为此工作了几天！     

解决方法

        我删除隐藏字段并为更新按钮分配数据库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>

我希望这能帮到您..     ,        复制“ 6”个属性会引起问题。当您说“ 7”时，您可能会在页面上看到第一个，而通常不是您想要的那个。这很容易解决： 放弃

id

属性，而改为

class

属性。您也可以使用属性选择器。 调整jQuery选择器，使其移至祖先，然后返回所需的内容。 首先是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(); 
    }
});

那应该解决您的客户端问题。     ,        您可以在每个提交中存储一个行号数据变量，并使用该变量来确定单击了哪一行，从而确定了需要从中提取值的输入。

$(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>