首頁猿問使用 JavaScript...

使用 JavaScript 按鈕后重置表行

Html5

呼啦一陣風(fēng) 2023-12-19 21:40:29

所以我有以下代碼：$('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>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">  <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>';};這里的目標(biāo)是創(chuàng)建一個(gè)發(fā)票系統(tǒng)。一切工作正常，直到我嘗試通過單擊行末尾的按鈕來添加行。一旦我這樣做了，一切都會(huì)重置，我不知道為什么。

查看完整描述

2 回答

繁華開滿天機(jī)

TA貢獻(xiàn)1816條經(jīng)驗(yàn) 獲得超4個(gè)贊

該問題是由 table.innerHTML += '<tr>...</tr>'; 引起的。聲明。

innerHTML更改對(duì)象的 HTML，這肯定會(huì)影響大小和位置，并且至少會(huì)觸發(fā)部分回流。這就是為什么表行的內(nèi)容將被重置的原因。

而是使用 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;

}

<!doctype html>

<html>

<head>

</head>

<body>

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>

<thead>

<tr>

<th style="width: 60%">Item - Description</th>

<th style="width: 10%">Price</th>

<th style="width: 10%">Amount</th>

<th style=>Action</th>

</tr>

</thead>

<td>

<div>

<option value="<Option1">Option 1</option>

<option value="<Option2">Option 2</option>

<option value="<Option3">Option 3</option>

</select>

</div>

</td>

<td>

</td>

</tr>

</tbody>

</table>

</div>

</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);

});

<html>

<head>

</head>

<body>

</script>

<thead>

<tr>

<th style="width: 60%">Item - Description</th>

<th style="width: 10%">Price</th>

<th style="width: 10%">Amount</th>

<th style=>Action</th>

</tr>

</thead>

<td>

<div>

<option value="<Option1">Option 1</option>

<option value="<Option2">Option 2</option>

<option value="<Option3">Option 3</option>

</select>

</div>

</td>

<td>

</td>

</tr>

</tbody>

</table>

</div>

</main>

</body>

</html>

反對(duì) 回復(fù) 2023-12-19

Helenr

TA貢獻(xiàn)1780條經(jīng)驗(yàn) 獲得超4個(gè)贊

您犯了一個(gè)非常簡(jiǎn)單的錯(cuò)誤，請(qǐng)?jiān)诖颂帣z查您的代碼：

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>';

這一行不應(yīng)該有一個(gè)分號(hào)：

'<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>'; +

您應(yīng)該將該行更改為：

'<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>'+

所以你的集團(tuán)應(yīng)該是這樣的：

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>';

反對(duì) 回復(fù) 2023-12-19