Влияет только верхняя часть tr/td

Question

У меня есть таблица, в которой данные динамически выводятся из базы данных. Проблема, с которой я сталкиваюсь, неважно, какую строку я пытаюсь проверить, результат возникает только в первом tr/td. Я буду размещать код для таблицы и ниже JS:

<?php 
foreach($paid_products as $product) 
{ 
    $price = empty($product->sales_price)?$product->price:$product->sales_price; 
    $ingredients = empty($product->ingredients)?$product->ingredients:$product->ingredients; 
    $quantity = empty($product->quantity)?0:$product->quantity; 
    $discount = empty($product->discount)?0:($product->discount); 
    $discount_amount = empty($product->discount_amount)?0:($product->discount_amount); 
    $discounted_amount = empty($product->discounted_amount)?0:($product->discounted_amount); 
    $total_quantity = empty($product->product_quantity)?0:($product->product_quantity); 
    $product_ordered = empty($product->product_ordered)?0:($product->product_ordered); 
    $quantity_available = $total_quantity - $product_ordered; 
    $subtotal = $price*$quantity; ?> 

    <tr class="calc"> 
     <td title="Ingredients: <?php echo $product->ingredients; ?>"><?php echo $product->name; ?></td> 
     <td title="Reason for price change:" <?php echo !empty($product->product_message)?' '.$product->product_message.'"':''; ?>> 
      <input style="width:100%; text-align:right; padding-right:5px;" type="text" name="paid_product_price[]" class="price paidShowMessage" value="<?php echo $price; ?>"> 
      <input type="text" class="paid_product_message" name="paid_product_message[]" value="<?php echo $product->product_message; ?>"> 
     </td> 
     <td title="Reason for discount:" <?php echo !empty($product->product_dmessage)?' '.$product->product_dmessage.'"':''; ?>> 
      <input style="width:100%; text-align:right; padding-right:5px;" type="text" name="paid_product_dscnt[]" class="dscnt spidEdit paidShowDMessage" value="<?php echo $discount; ?>"> 
      <!--<input type="text" name="paid_product_dscnt[]" class="dscnt spidEdit" value="<?php //echo $discount; ?>" data-min="0" data-max="<?php //echo $product->max; ?> ">--> 
      <input type="text" class="paid_product_dmessage" name="paid_product_dmessage[]" value="<?php echo $product->product_dmessage; ?>"> 
     </td> 
     <td> 
      <input type="text" name="paid_product_dscnt_amt[]" class="dscnt_amt spidEdit" value="<?php echo $discount_amount; ?>" data-min="0" data-max="<?php echo $product->max; ?> "> 
     </td> 
     <td> 
      <input type="hidden" name="paid_product_id[]" value="<?php echo $product->product_id; ?>"> 
      <input type="hidden" value="<?php echo $quantity_available; ?>" class="qa">     
      <input type="text" name="paid_product_qty[]" onkeyup="backOrder()" class="qty spinEdit" value="<?php echo $quantity; ?>" data-min="0" data-max="<?php echo $product->max; ?>" > 
     </td> 
     <!--data-min="0"--> 
     <td> 
      <input type="text" class="bo spidEdit" id="quav" value="<?php echo $quantity_available;?>"> 
     </td> 
     <td title="Back Order Quantity:"> 
      <input style="width:100%; text-align:right; padding-right:5px;" id="qupe" type="text" name="paid_product_bo[]" class="boShowMessage" value=""> 
     </td> 
     <td style="text-align:right; padding-right:5px;"> 
      <input type="text" class="total" name="paid_product_dscnted_amt[]" value="<?php echo $discounted_amount; ?>" readonly> 
     </td> 
    </tr> 
    <?php 
} ?> 

function backOrder() { 
    var quav = document.getElementById("quav"); 
    var qupe = document.getElementById("qupe"); 
    qupe.value = -1 * (quav.value); 
} 

Answer 1

<?php 
     $count = 0; 
     foreach($paid_products as $product){ 
      $price = empty($product->sales_price)?$product->price:$product->sales_price; 
      $ingredients = empty($product->ingredients)?$product->ingredients:$product->ingredients; 
      $quantity = empty($product->quantity)?0:$product->quantity; 
      $discount = empty($product->discount)?0:($product->discount); 
      $discount_amount = empty($product->discount_amount)?0:($product->discount_amount); 
      $discounted_amount = empty($product->discounted_amount)?0:($product->discounted_amount); 
      $total_quantity = empty($product->product_quantity)?0:($product->product_quantity); 
      $product_ordered = empty($product->product_ordered)?0:($product->product_ordered); 
      $quantity_available = $total_quantity - $product_ordered; 
      $subtotal = $price*$quantity; 
      $count++; 
      ?> 
      <tr class="calc"> 
      <td title="Ingredients: <?php echo $product->ingredients; ?>"><?php echo $product->name; ?></td> 
      <td title="Reason for price change:" <?php echo !empty($product->product_message)?' '.$product->product_message.'"':''; ?>> 
       <input style="width:100%; text-align:right; padding-right:5px;" type="text" name="paid_product_price[]" class="price paidShowMessage" value="<?php echo $price; ?>"> 
       <input type="text" class="paid_product_message" name="paid_product_message[]" value="<?php echo $product->product_message; ?>"> 
      </td> 
      <td title="Reason for discount:" <?php echo !empty($product->product_dmessage)?' '.$product->product_dmessage.'"':''; ?>> 
       <input style="width:100%; text-align:right; padding-right:5px;" type="text" name="paid_product_dscnt[]" class="dscnt spidEdit paidShowDMessage" value="<?php echo $discount; ?>"> 
       <!--<input type="text" name="paid_product_dscnt[]" class="dscnt spidEdit" value="<?php //echo $discount; ?>" data-min="0" data-max="<?php //echo $product->max; ?> ">--> 
       <input type="text" class="paid_product_dmessage" name="paid_product_dmessage[]" value="<?php echo $product->product_dmessage; ?>"> 
      </td> 
      <td><input type="text" name="paid_product_dscnt_amt[]" class="dscnt_amt spidEdit" value="<?php echo $discount_amount; ?>" data-min="0" data-max="<?php echo $product->max; ?> "></td> 
      <td ><input type="hidden" name="paid_product_id[]" value="<?php echo $product->product_id; ?>"><input type="hidden" value="<?php echo $quantity_available; ?>" class="qa">     
      <input type="text" name="paid_product_qty[]" onkeyup="backOrder(<?php echo $count; ?>)" class="qty spinEdit" value="<?php echo $quantity; ?>" data-min="0" data-max="<?php echo $product->max; ?>" ></td><!--data-min="0"--> 
      <td><input type="text" class="bo spidEdit" id="quav_<?php echo $count; ?>" value="<?php echo $quantity_available;?>"></td> 
      <td title="Back Order Quantity:"> 
      <input style="width:100%; text-align:right; padding-right:5px;" id="qupe_<?php echo $count; ?>" type="text" name="paid_product_bo[]" class="boShowMessage" value=""></td> 

      <td style="text-align:right; padding-right:5px;"><input type="text" class="total" name="paid_product_dscnted_amt[]" value="<?php echo $discounted_amount; ?>" readonly></td> 
      </tr> 


      <?php } ?> 


<script> 
function backOrder(id) 
{ 

var quav = document.getElementById("quav_" + id); 
var qupe = document.getElementById("qupe_" + id); 
qupe.value = -1 * (quav.value); 

} 
</script> 

Answer 2

Вы не можете иметь несколько элементов с одинаковыми ID. Вы должны использовать атрибут class, а в JavaScript выберите элементы с помощью document.getElementsByClassName() и перейдите по ним.

Answer 3

id значения должно быть быть уникальным в документе. Если вам нужно использовать что-то, чтобы idenitfy несколько элементов, не используйте id. Другие вещи, которые вы можете использовать, - class или любой атрибут data-*.

Если вы используете класс, вы должны использовать querySelectorAll(".the-class") или getElementsByClassName("the-class") и перебрать полученную коллекцию. Если вы используете атрибут data-*, вы должны использовать querySelectorAll('[data-attr-name="attr-value"]') и, опять же, перебрать полученную коллекцию.

Например, ваши строки имеют класс calc, и поэтому мы можем использовать, что и смотреть в каждой строке для qupe и quav:

function backOrder() { 
 
    Array.prototype.forEach.call(document.querySelectorAll(".calc"), function(row) { 
 
    var quav = row.querySelector(".quav"); 
 
    var qupe = row.querySelector(".qupe"); 
 
    qupe.value = -1 * quav.value; 
 
    }); 
 
} 
 
backOrder();

<table> 
 
    <tbody> 
 
    <tr class="calc"> 
 
     <td> 
 
     <label> 
 
      Quav 1 
 
      <input type="text" class="quav" value="1"> 
 
     </label> 
 
     </td> 
 
     <td> 
 
     <label> 
 
      Qupe 1 
 
      <input type="text" class="qupe" value="1"> 
 
     </label> 
 
     </td> 
 
    </tr> 
 
    <tr class="calc"> 
 
     <td> 
 
     <label> 
 
      Quav 2 
 
      <input type="text" class="quav" value="2"> 
 
     </label> 
 
     </td> 
 
     <td> 
 
     <label> 
 
      Qupe 2 
 
      <input type="text" class="qupe" value="2"> 
 
     </label> 
 
     </td> 
 
    </tr> 
 
    <tr class="calc"> 
 
     <td> 
 
     <label> 
 
      Quav 3 
 
      <input type="text" class="quav" value="3"> 
 
     </label> 
 
     </td> 
 
     <td> 
 
     <label> 
 
      Qupe 3 
 
      <input type="text" class="qupe" value="3"> 
 
     </label> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Обычно, однако, когда дело с пар таких элементов, лучше всего идентифицировать контейнер, который у них есть.