javascript - jquery 不适用于所有表格行
问题描述
我有以下功能:
$('input.qty').change(function(){
var $tr = $(this).closest('tr');
// var price = $(this).closest('tr').find('input.price').val();
var price = parseFloat($tr.find('td').eq(2).text());
var qty = parseInt($(this).val());
$(this).closest('tr').find('input.amt').val(qty * price);
console.log($tr);
console.log(price);
console.log(qty);
});
当谈到 jquery 时,我仍然是绿色的,所以我可能会给浏览器错误的指示。
我认为函数应该做什么: 该函数适用于下面代码段中的表,并且应该简单地用我更新数量的行的数量和价格单元格的乘积来更新数量列。问题是它只适用无论我尝试什么,都到表的第一行。迄今为止,我已经尝试将脚本移动到页面的头部(它位于页脚中);换掉价格变量声明(使用注释代码)并花费许多小时搜索 google、w3 和这个站点。
我几乎可以看出出了什么问题。我在页面加载时加载脚本并且它按原样应用于表格,但是当我添加一行时,脚本不会重新加载(为什么会这样?)。我觉得我需要在数量线上包含某种触发器,但我无法理解它会是什么。我也可能会走投无路。
$('input.qty').change(function() {
var $tr = $(this).closest('tr');
var price = $(this).closest('tr').find('input.price').val();
// var price = parseFloat($tr.find('td').eq(1).text());
var qty = parseInt($(this).val());
$(this).closest('tr').find('input.amt').val(qty * price);
});
.tis {
border: none;
background-color: Transparent;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Font Awesome CDN -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<!-- Bootstrap CSS/CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<main role="main">
<script type="text/javascript">
function addRow() {
var table = document.getElementById("invoiceTableBody")
var newRow =
'<tr>' +
'<td>'+
'<div>'+
'<select class="try" name="this">'+
'<option value="Option1">Option 1</option>'+
'<option value="Option2">Option 2</option>'+
'<option value="Option3">Option 3</option>'+
'</select>'+
'</div>'+
'</td>'+
'<td><input type="text" name="l108Price[]" size= "3" class="price tis"></td>' +
'<td><input type="text" name="l108Qty[]" size= "1" class="qty tis"></td>' +
'<td><input type= "text" name="l108Amt[]" size= "3" class="amt tis" disabled></td>' +
'<td><div><button type="button" name="button" onclick="addRow()" style="background-color:Transparent; border:none; color:green;"><i class="fas fa-plus-circle"></i></button></div></td>'+
'</tr>';
// Inserting the new row as an HTMLElement at the end of the table element
table.insertAdjacentHTML('beforeend', newRow);
};
</script>
<div class="row">
<div class="col-md-8 offset-2">
<table class="table thead-dark table-hover border-bottom" id="invoiceTable">
<thead>
<tr>
<th style="width: 60%">Item - Description</th>
<th style="width: 10%">Price</th>
<th style="width: 5%">Qty</th>
<th style="width: 10%">Amount</th>
<th style=>Action</th>
</tr>
</thead>
<tbody id="invoiceTableBody">
<tr id="invoiceTableRow">
<td>
<div>
<select class="try" name="this">
<option value="<Option1">Option 1</option>
<option value="<Option2">Option 2</option>
<option value="<Option3">Option 3</option>
</select>
</div>
</td>
<td><input type="text" name="l108Price[]" size="3" class="price tis"></td>
<td><input type="text" name="l108Qty[]" size="1" class="qty tis"></td>
<td><input type='text' name='l108Amt[]' size='3' class="amt tis" disabled></td>
<td>
<div><button type="button" name="button" onclick="addRow()" style="background-color:Transparent; border:none; color:green;"><i class="fas fa-plus-circle"></i></button></div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</main><!-- /role main -->
</body>
</html>
解决方案
推荐阅读
- django - 时态数据库的 Django 自定义创建管理器逻辑
- python - 使用 Python + pydub 在边缘检测语音与非语音
- sql-server - AWS DataPipeline 使用 SQLActivity 插入状态
- ruby-on-rails - ruby on rails vue 和 html.slim
- jmeter - 基于表单的身份验证 - Jmeter
- ansible - 如何在 Ansible set_fact 中使用事实?
- rest - 将 Tabulator 数据更改回服务器 - RESTful
- android - 错误膨胀类 android.support.v7.widget.CardView ClassNotFoundException
- python - 如何将字节字符串转换为具有正确转义的字符?
- node.js - NodeJS 应用程序仅继续 6 个打开的连接