Question

我不确定我尝试做的事情是否简单，但现在是：

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

我正在使用以下代码尝试执行jQuery .ajax帖子，但我看到了我的问题 - 我正在为输入字段分配ID，并且每页只能声明一个ID我确定这是一个问题。

我正在尝试这样做，以便当您单击UPDATE按钮时，它会传递INPUT框中该行的变量和rowID的隐藏INPUT字段，并调用更新的.php文件DB。

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

提前致谢，已经为此工作了好几天！

Answer 1

您可以在每个提交中存储行号数据变量，并使用它来确定单击了哪一行，以及从中提取值所需的输入。

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

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

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

Answer 3

我删除隐藏字段并将数据库ID分配给更新按钮，因为按钮将单击获取该ID和相应数据。

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

我希望这会对你有帮助..

jquery post - 更新db - 多行

3 个答案: