2017-05-27 10 views
0

数量入力に焦点を当てると、各価格行の値を取得しようとしていますが、最初の行は正常に機能しましたが、他の行は私に最初の行私はまだjQueryとAJAXについて学んでいますjqueryは最初の行の値だけを返します

<!DOCTYPE html> 
<html> 
<head> 
<title>Form</title> 
<script type="text/javascript" src="jquery.js"></script> 
</head> 
<body> 
<?php 
include ("dblink.php"); 

?> 

<form method="POST"> 
Customer Name: <input type="text" name="customer"><br /> 
Order Date : <input type="date" name="date"><br /> 
<br /> 

<table border='1' style='width:50%'> 
    <tr> 
     <th> Item Name </th> 
     <th> Price </th> 
     <th> Quantity </th> 
     <th> Total </th> 
    </tr> 
<?php 
    $sql = "SELECT * FROM items"; 
    $result = mysqli_query($link, $sql); 

    if(!$result){ 
     die ("SQL Error : " . mysqli_error($link)); 
    } 
    while ($row = mysqli_fetch_object($result)) 
    { 
    echo "<tr>"; 
    echo "<td class='name'>" . $row->name . "</td>"; 
    echo "<td class='itemprice' value='" . $row->price . "'>" . $row->price . "</td>"; 
?> 
    <td><input type="number" class="quantity"></td> 
    <td><div class="total"></div></td> 
<?php 
    } 
    echo "</tr>"; 
?> 
</table> 
<input type="submit" name="submit" value="Submit"> 
</form> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.quantity').focus(function() { 
      var text = $('.itemprice').attr('value'); 
      alert(text); 
     }) 
    }); 
</script> 

を、ループwhileループと</tr>が出ている間、まず

+1

おそらく '$ .each()'を使って反復し、すべての行の値を1つの警告にコンパイルする必要があります。 – Rasclatt

答えて

1

<tr>はである助けてください。したがって、</tr>はwhileループで移動する必要があります。

第2に、jqueryのクラスセレクタを使用すると、jqueryが最初の値を返します。したがって、$('.itemprice').attr('value')戻り値の属性は、最初に.itempriceです。 .quantityの兄弟を選択すると、.itempriceの値がこの.quantityに近い値になります。

<!DOCTYPE html> 
<html> 
<head> 
    <title>Form</title> 
    <script type="text/javascript" src="jquery.js"></script> 
</head> 
<body> 
    <?php 
    include ("dblink.php"); 
    ?> 

    <form method="POST"> 
     Customer Name: <input type="text" name="customer"><br /> 
     Order Date : <input type="date" name="date"><br /> 
     <br /> 

     <table border='1' style='width:50%'> 
      <tr> 
       <th> Item Name </th> 
       <th> Price </th> 
       <th> Quantity </th> 
       <th> Total </th> 
      </tr> 
      <?php 
      $sql = "SELECT * FROM items"; 
      $result = mysqli_query($link, $sql); 

      if(!$result){ 
      die ("SQL Error : " . mysqli_error($link)); 
     } 
     while ($row = mysqli_fetch_object($result)) 
     { 
     echo "<tr>"; 
     echo "<td class='name'>" . $row->name . "</td>"; 
     echo "<td class='itemprice' value='" . $row->price . "'>" . $row->price . "</td>"; 
     ?> 
     <td><input type="number" class="quantity"></td> 
     <td><div class="total"></div></td> 
     echo "</tr>"; 
     <?php 
    } 
    ?> 
</table> 
<input type="submit" name="submit" value="Submit"> 
</form> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.quantity').focus(function() { 
      var text = $(this).siblings('.itemprice').attr('value'); 
      alert(text); 
     }) 
    }); 
</script> 
関連する問題