Question

我正在构建一个发票系统，我将使用jQuery来更新字段。

我正在考虑提取价格和数字描述（如果有的话），并将它们放入文本字段中，这样可以很容易地改变，如果应该有一些“在柜台”调整发票。

html代码如下所示：

<table>
  <tr class="item-row">
    <td class="partNumber"><input type="text" name="partNo"></input></td>
    <td class="description"><input type="text" name="description"></input></td>
    <td class="price"><input type="text" name="price"></input></td>
  </tr>
</table>

jQuery代码，这是我不太熟悉的部分，看起来像这样：

$(document).ready(function() {
    $(".partNo").keyup(getInfo);
});


function getInfo(){
    var row = $(this).parents('.item-row');
    var partNo = row.find(".partNo").val();

    row.find(".description input")
            .load("script.php", {vorunr: $(".partNo").val(), type: "desc"});

    row.find(".price input")
            .load("script.php", {vorunr: $(".partNo").val(), type: "price"});
}

此代码工作正常，文件script.php返回数据库中的值。

我的问题是，当我编辑第一个partNumber输入字段时，我的所有表行都会更新。

有人能帮助我吗？

Answer 1

你多次使用选择器“.partNo”，但我看不到带有“partNo”类的html dom元素。我看到一个名为“partNo”的输入字段。

将keyup事件绑定到

$('input[name="partNo"]').keyup(getInfo);

此外，这是我建议的getInfo函数解决方案...

function getInfo(){
    var row = $(this).parents('.item-row');
    var partNo = $(this).val();

    row.find(".description input")
        .load("script.php", {vorunr: partNo, type: "desc"});

    row.find(".price input")
        .load("script.php", {vorunr: partNo, type: "price"});
}

Answer 2

尝试使用.closest()代替.parents()。另外，你没有一个名为“partNo”的类，只是一个带有“partNumber”类的td下的输入（也许试试$('.partNumber input').keyup(...);

此外，您可能需要查看json_encode并使用单个查询将字段填充到script.php而不是几个加载。你可以这样做：

的script.php

<?php
  $partNo = $_GET['vorunr'];

  // perform query to gather the data and populate $dbrow

  header('Content-Type: application/json'); // make sure browser knows what it is
  echo json_encode(Array(
    'desc' => $dbrow['description'],
    'price' => $dbrow['price']
  ));

?>

然后使用

之类的东西

$('.partNumber input').keyup(function(){
  var row = $(this).closest('.item-row');
  var partNumber = $(this).val();

  $.getJSON('<?php echo $_SERVER['PHP_SELF']; ?>',{vorunr:partNumber},function(data,textStatus,xhr){
    $('.description input',row).val(data.desc);
    $('.price input',row).val(data.price);
  });
});

<强> EDITv2

这是一个示例（自给自足）文件，您可以运行并查看我的意思。

<?php
  // handle the ajax query
  if (isset($_GET['vorunr'])) // make sure you validate this variable; I'm not doing so for the sake of demo.
  {
    header('Content-Type: application/json');
    echo json_encode(Array(
      'desc'  => $_GET['vorunr'],
      'price' => sprintf('%0.2f',rand(100,99999)/100)
    ));
    exit;
  }
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>Ajax Sample</title>
    <!-- MAKE SURE YOU DON'T USE THIS REFERENCE IN PRODUCTION -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="Text/javascript">
    $(document).ready(function(){
      $('.partNumber input').keyup(function(){
        var row = $(this).closest('.item-row');
        var partNumber = $(this).val();

        $.getJSON('<?php echo $_SERVER['PHP_SELF']; ?>',{vorunr:partNumber},function(data,textStatus,xhr){
          $('.description input',row).val(data.desc);
          $('.price input',row).val(data.price);
        });
      });
    });
    </script>
  </head>
  <body>
    <table>
      <tr class="item-row">
        <td class="partNumber"><input type="text" name="partNo"></input></td>
        <td class="description"><input type="text" name="description"></input></td>
        <td class="price"><input type="text" name="price"></input></td>
      </tr>
      <tr class="item-row">
        <td class="partNumber"><input type="text" name="partNo"></input></td>
        <td class="description"><input type="text" name="description"></input></td>
        <td class="price"><input type="text" name="price"></input></td>
      </tr>
      <tr class="item-row">
        <td class="partNumber"><input type="text" name="partNo"></input></td>
        <td class="description"><input type="text" name="description"></input></td>
        <td class="price"><input type="text" name="price"></input></td>
      </tr>
    </table>
  </body>
</html>

jQuery，更新正确的字段

2 个答案: