只有最顶层的tr/td会受到影响

Only the top most tr/td getting affected

本文关键字:td 受到影响 tr      更新时间:2023-09-26

我有一个表,其中的数据是从数据库中动态获取的。我面临的问题是,无论我尝试检查哪一行,结果都只发生在第一个 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);
}

不能有多个元素具有相同的 ID。您必须使用 class 属性,并在 JavaScript 中使用 document.getElementsByClassName() 选择元素并迭代它们。

id在文档中必须是唯一的。如果您必须使用某些东西来构思多个元素,请不要使用 id 。您可以使用的其他内容是class或任何data-*属性。

如果使用类,则应使用 querySelectorAll(".the-class")getElementsByClassName("the-class") 并循环访问生成的集合。如果使用 data-* 属性,则应使用 querySelectorAll('[data-attr-name="attr-value"]') 并再次循环遍历生成的集合。

例如,您的行具有类calc,因此我们可以使用它并在每行中查找qupequav

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>

但是,通常情况下,在处理这样的元素对时,最好确定它们共有的容器。

 <?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>