使用 JavaScript 按钮后重置表行
所以我有以下代码：
$('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>';
};
这里的目标是创建一个发票系统。一切工作正常，直到我尝试通过单击行末尾的按钮来添加行。一旦我这样做了，一切都会重置，我不知道为什么。
呼啦一阵风浏览 117回答 2
2回答
-
繁华开满天机
该问题是由 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
您犯了一个非常简单的错误，请在此处检查您的代码：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>';
随时随地看视频慕课网APP
相关分类
Html5