Question

我如何管理第二行产品，但价格栏无法显示价格？

我正在使用ajax技术从数据库中获取价格，第一列获取价格并给出正确的结果，但是当我处理第二行时，它什么也没显示。如何显示第二行价格等等？

Php.php

<?php
 //load_data_select.php
 $connect = mysqli_connect("localhost", "root", "", "zzz");
 function processor_brand($connect)
 {
      $output = '';
      $sql = "SELECT * FROM product WHERE brand_name='Processor'";
      $result = mysqli_query($connect, $sql);
      while($row = mysqli_fetch_array($result))
      {
           $output .= '<option value="'.$row["product_id"].'">'.$row["product_name"].'</option>';
      }
      return $output;
 }
 function ram_brand($connect)
 {
      $output = '';
      $sql = "SELECT * FROM product WHERE brand_name='Ram'";
      $result = mysqli_query($connect, $sql);
      while($row = mysqli_fetch_array($result))
      {
           $output .= '<option value="'.$row["product_id"].'">'.$row["product_name"].'</option>';
      }
      return $output;
 }
 ?>

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  </head>
  <body>

  </body>
</html>
        <table>
        <tr>
            <th>
                ITEM
            </th>
            <th>
                QUANTITY
            </th>
            <th>
                Per Item Price
            </th>
            <th>
                Total Price
            </th>
        </tr>
        <tr class="txtMult">
            <td>
              <select name="brand" id="brand">
                <option>Show All Product</option>
                <?php echo processor_brand($connect); ?>
              </select>
            </td>
            <td>
                <input name="txtEmmail" id="price" class="val1"  />
            </td>
            <td>
                <input type="text" style="border:none" readonly id="show_product" name="txtEmmail" class="val2" >
            </td>
            <td>
                <span class="multTotal" id="show_product" readonly name="" value="">0.00</span>
            </td>
        </tr>
        <!-- <tr class="txtMult">
            <td>
              <select name="brand" id="brand">
                <option>Show All Product</option>
                <?php echo processor_brand($connect); ?>
              </select>
            </td>
            <td>
                <input name="txtEmmail" id="price" class="val1"  />
            </td>
            <td>
                <input type="text" style="border:none" readonly id="show_product" name="txtEmmail" class="val2" >
            </td>
            <td>
                <span class="multTotal" id="show_product" readonly name="" value="">0.00</span>
            </td>
        </tr> -->
        <tr class="txtMult">
            <td>
              <select name="brand" id="brand">
                <option>Show All Product</option>
                <?php echo ram_brand($connect); ?>
              </select>
            </td>
            <td>
                <input name="txtEmmail" id="price" class="val1"  />
            </td>
            <td>
                <input type="text" style="border:none" readonly id="show_product" name="txtEmmail" class="val2" >
            </td>
            <td>
                <span class="multTotal" id="show_product" readonly name="" value="">0.00</span>
            </td>
        </tr>
            <tr>
    <td colspan="6" style="border-top:1px solid black" align="right">
        Grand Total# <span id="grandTotal">0.00</span>
    </td>
</tr>
    </table>

<script type="text/javascript">
  function multInputs() {
             var mult = 0;
             // for each row:
             $("tr.txtMult").each(function () {
                 // get the values from this row:
                 var $val1 = $('.val1', this).val();
                 var $val2 = $('.val2', this).val();
                 var $total = ($val1 * 1) * ($val2 * 1)
                 $('.multTotal',this).text($total);
                 mult += $total;
             });
             $("#grandTotal").text(mult);
    }

    $(document).ready(function () {
         $(".txtMult input").keyup(function(){
          multInputs();
        });
    });

$(document).ready(function(){
     $('#brand').change(function(){
          var product_id = $(this).val();
          $.ajax({
               url:"load_data.php",
               method:"POST",
               data:{product_id:product_id},
               success:function(data){
                    $('#show_product').val(data);
                    document.getElementById("price").value = "1";
                    multInputs();
               }
          });
     });
});
</script>

Load_data.php

  <?php
//load_data.php
$connect = mysqli_connect("localhost", "root", "", "zzz");
$output = '';
if(isset($_POST["product_id"]))
{
     if($_POST["product_id"] != '')
     {
          $sql = "SELECT * FROM product WHERE product_id = '".$_POST["product_id"]."'";
     }
     else
     {
          $sql = "SELECT * FROM product";
     }
     $result = mysqli_query($connect, $sql);
     while($row = mysqli_fetch_array($result))
     {
          $output .=$row["price"];
     }
     echo $output;
}
?>

Answer 1

Document方法getElementById（）返回一个Element对象，该对象表示其id属性与指定字符串匹配的元素。由于如果指定了元素ID，则它们必须是唯一的，因此它们是快速访问特定元素的有用方法。

ID price无法在第二行中再次使用，因为第一行已被使用。

1. <input name="txtEmmail" id="price' class="val1"  />  -->  <input name="txtEmmail" class="val1 price" />
2. document.getElementById("price").value = "1" --> $('.price').val(1)

我如何管理第二行产品，但价格栏无法显示价格？

1 个答案: