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

时间：2016-03-14 09:23:14

标签： javascript php jquery html

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

3 个答案:

答案 0 :(得分：1)

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

答案 1 :(得分：1)

id值必须在文档中是唯一的。如果您必须使用某些内容来识别多个元素，请不要使用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>

但是，通常情况下，在处理这样的元素对时，最好找出一个共同的容器。

答案 2 :(得分：0)

 <?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>
相关问题
最新问题