所以我有以下代码：$('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> <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") table.innerHTML+= '<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>' + '</tr>';};这里的目标是创建一个发票系统。一切工作正常，直到我尝试通过单击行末尾的按钮来添加行。一旦我这样做了，一切都会重置，我不知道为什么。
2 回答
繁华开满天机
TA贡献1816条经验 获得超4个赞
该问题是由 table.innerHTML += '<tr>...</tr>'; 引起的。声明。
innerHTML更改对象的 HTML，这肯定会影响大小和位置，并且至少会触发部分回流。这就是为什么表行的内容将被重置的原因。
而是使用 HTMLElement.prototype.insertAdjacentHTML 方法以正确的方式将 HTMLElement 插入到 DOM 中。所以我稍微重写了你的代码：
$('#invoiceTableBody').on('change', 'input.qty', 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>
<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")
// Composing your HTMLElement as a string
var element =
'<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 string as a HTMLElement at the end of the table element
table.insertAdjacentHTML('beforeend', element);
};
</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>
如果您想将新行添加到您单击的行的正下方，可以使用下面的代码来完成。我从 HTML 中删除了你的脚本：
$('#invoiceTableBody').on('click', 'button.action', function() {
var row = event.target.closest(".invoiceTableRow");
// Composing your HTMLElement as a string
var element =
'<tr class="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" style="background-color:Transparent; border:none; color:green;" class="action"><i class="fas fa-plus-circle"></i></button></div></td>' +
'</tr>';
// Inserting the string as a HTMLElement after the current row
row.insertAdjacentHTML('afterend', element);
});
$('#invoiceTableBody').on('change', 'input.qty', 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);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<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">
</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" class="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" class="action" 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>
Helenr
TA贡献1780条经验 获得超3个赞
您犯了一个非常简单的错误，请在此处检查您的代码：
var table = document.getElementById("invoiceTableBody")
table.innerHTML+=
'<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>';
这一行不应该有一个分号：
'<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>'; +
您应该将该行更改为：
'<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>'+
所以你的集团应该是这样的：
var table = document.getElementById("invoiceTableBody")
table.innerHTML+=
'<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>';
- 2 回答
- 0 关注
- 116 浏览
添加回答
举报
0/150
提交
取消