jQuery只获取最后一行

时间:2016-08-25 13:14:58

标签: php jquery mysql

我正在使用MySQL

检索“库存”数据
        <table class="table table-striped table-bordered table-hover results table-fixed">
          <thead>
            <tr>
                <th class="text-center">#</th>
                <th>Product Name</th>
                <th>Description</th>
                <th>Price</th>
                <th>In Stock</th>
                <th style="width: 20%">Quantity</th>
            </tr>
            <tr class="warning no-result">
              <td colspan="8"><i class="fa fa-warning"></i> No Product Found</td>
            </tr>
          </thead>

          <tbody>

            <?php 
                $query = "SELECT * FROM products";
                $exec = mysqli_query($connection, $query);

                while ($row = mysqli_fetch_array($exec)) {

                  $product_id = $row['product_id'];
                  $product_name = $row['product_name'];
                  $description = $row['description'];
                  $product_quantity = $row['quantity'];
                  $product_price = $row['sell_price'];
            ?>

            <tr>
                <td class="text-center"><?php echo $product_id; ?>
                  <input type="hidden" name="product_id[]" value="<?php echo $product_id; ?>">
                </td>
                       <td><?php echo $product_name; ?></td>
                       <td><?php echo $description; ?></td>
                       <td><?php echo $product_price; ?></td>
                       <td><input type="number" value="<?php echo $product_quantity; ?>" id="qtyResult" disabled></td>
                      <td><input type="number" name="qtyBuy[]" id="qtyBuy" onkeyup="updateStock()"></td>
            </tr>

            <?php } ?>

        </tbody>
      </table>

我想在数量字段上输入数字时自动更新库存字段。

“San Mig Light”的股票是500,但是当我在数量字段上输入数字时,股票会变为表格中最后一条45的记录。

除了第一行之外,行的其余部分也不起作用。

这是我的jQuery脚本。

<script>

  function updateStock() {
     var inputQty = $('#qtyBuy').val();
     var inStock = "<?php echo $product_quantity; ?>"
    $('#qtyResult').val(inStock - inputQty);
   }

 </script>

Table

2 个答案:

答案 0 :(得分:0)

尝试将 此事件 关键字传递给您的函数,例如:

<td><input type="number" name="qtyBuy[]" id="qtyBuy" onkeyup="updateStock(this, event)"></td>

因为ID必须是唯一的,所以尝试添加如下数字:qtyBuy1,qtyBuy2 ......

要选择这些字段,您可以:find('input [id ^ =“qtyResult”]'):选择id以字符串“qtyResult”开头的输入字段。

因此,在 updateStock 中,您可以使用参数来引用当前值,如:

    function updateStock(obj, event) {
        var inputQty = obj.value;
        var inStock = "<?php echo $product_quantity; ?>";
        $(obj).closest('tr').find('input[id^="qtyResult"]').val(inStock - inputQty);
    }

摘录:

function updateStock(obj, event) {
  var inputQty = obj.value;
  var inStock = $(obj).closest('tr').find('input[id^="qtyResult"]').val();
  var av = $(obj).closest('tr').find('input[id^="qtyResult"]').data('savedValue');
  if (av == undefined) {
    $(obj).closest('tr').find('input[id^="qtyResult"]').data('savedValue', inStock);
    av = inStock;
  }
  inStock = av;
  console.log(av + ' / ' + inStock + ' / ' + inputQty);
  $(obj).closest('tr').find('input[id^="qtyResult"]').val(inStock - inputQty);
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<table class="table table-striped table-bordered table-hover results table-fixed">
    <thead>
    <tr>
        <th class="text-center">#</th>
        <th>Product Name</th>
        <th>Description</th>
        <th>Price</th>
        <th>In Stock</th>
        <th style="width: 20%">Quantity</th>
    </tr>
    <tr class="warning no-result">
        <td colspan="8"><i class="fa fa-warning"></i> No Product Found</td>
    </tr>
    </thead>

    <tbody>
    <tr>
        <td class="text-center">product_id1
            <input type="hidden" name="product_id[]" value="1">
        </td>
        <td>product name1</td>
        <td>description1</td>
        <td>product_price1</td>
        <td><input type="number" value="1" id="qtyResult1" disabled></td>
        <td><input type="number" name="qtyBuy[]" id="qtyBuy1" onkeyup="updateStock(this, event)"></td>
    </tr>
    <tr>
        <td class="text-center">product_id2
            <input type="hidden" name="product_id[]" value="<?php echo $product_id; ?>">
        </td>
        <td>product_name2</td>
        <td>description2</td>
        <td>product_price2</td>
        <td><input type="number" value="1" id="qtyResult2" disabled></td>
        <td><input type="number" name="qtyBuy[]" id="qtyBuy2" onkeyup="updateStock(this, event)"></td>
    </tr>
    </tbody>
</table>

答案 1 :(得分:0)

jQuery 3.4.1
在您的js脚本中指定,以获取正确的行。

 $('.myclickedclass').click(function() {
 var id=$(this).data("mydataid"); // This is the most important line
 $.ajax({
 url:"myserverfile.php",
 method:"POST",
 data:{id:id},
 dataType:"text",
 success:function(data) {
 // Whatever
 }
 });
 });