只有最顶层的tr/td会受到影响
Only the top most tr/td getting affected
我有一个表,其中的数据是从数据库中动态获取的。我面临的问题是,无论我尝试检查哪一行,结果都只发生在第一个 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
,因此我们可以使用它并在每行中查找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>
但是,通常情况下,在处理这样的元素对时,最好确定它们共有的容器。
<?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>
相关文章:
- 正在获取生成的PHP td值
- 鼠标悬停事件影响列表中所有行中的按钮,而不仅仅是特定按钮
- 在同一个服务工作者中处理service-worker.js有任何影响吗
- 如何在td元素中添加监听器
- jQuery工具验证器自定义效果-添加&消除影响
- 如何首先设置样式<td>表中包含在窗体中的元素
- Array.push受到Array.unshift后调用的影响
- 为什么全局变量没有't似乎受到内部作用域(Javascript)的影响
- 只有最顶层的tr/td会受到影响
- AngularJS:如果ng模型被另一个模型填充,如何让它受到影响
- 为什么moment.utc(..).diff(moment.ucc(..))会受到源日期偏移量的影响
- 我的Javascript函数受到另一个已经定义的JS函数的影响
- java脚本独立文件的性能受到影响
- 变形目标较少的网格会受到变形目标较多的网格的影响
- 为什么通过JavaScript改变样式会受到CSS转换的影响
- 使用GPU在画布上绘图时,性能会受到影响
- JavaScript控制台中发生错误.功能可能会受到影响
- 为什么元素的*set_capture*会受到其父元素的*set_capture*的影响
- jQuery UI的可拖动位置是否受到scrollTop的影响?(包括JSFiddle)
- 防止类的所有引用都受到触发函数的影响