1
我只想删除动态创建的行，但iam无法使用jquery和javascript调用函数。HTML jquery：onclick函数删除动态表格行不调用
const dynamic_JS = ({ sno, optionVal, price }) => `<tr><td>${sno}</td> <td><select name="selectProduct" class="form-control" selected="${optionVal}"><option value="0"> -- Select One --</option><option value="1"> IPhone </option><option value="2"> MAC </option><option value="3"> Windows </option></select></td> <td><input type="text" class="form-control" value="${price}" title="" ></td> <td><button type="button" class="remove-row btn btn-info glyphicon glyphicon-remove" ></button></td> </tr>`;
// onclick=\'removeRow(this)\'
//window.onload=function(){}
$(document).ready(function() {
\t var template_add = $('#hidden-template').text();
\t function render(props) {
\t return function(tok, i) {
\t \t return (i % 2) ? props[tok] : tok;
\t };
\t }
\t var items = [ { sno: '1', optionVal: '0', price: '0' } ];
\t var dynamic_HTML = template_add.split(/\$\{(.+?)\}/g);
\t $('tbody').append(items.map(function(item) {
\t return dynamic_HTML.map(render(item)).join('');
\t }));
});
// https://stackoverflow.com/a/35592412/5081877
$('#number_only').on('input propertychange', function() {
\t this.value = this.value.replace(/[^0-9]/g, '');
});
$('.add-new').on('click', function() {
$("#productTable").each(function() {
\t var tr_last = $('tbody > tr:last', this).clone();
\t var td_no = tr_last.find('td:first');
\t var serialNumber = parseInt(td_no.text()) + 1;
\t // https://stackoverflow.com/a/6588327/5081877
\t var tr_first_input = $('tbody > tr:first > td:nth-child(3) > input');
\t var tr_first_price = parseFloat(tr_first_input.val()) || 0;
\t console.dir(tr_first_price);
\t
\t totalamount += tr_first_price;
\t $('#totalAdd').text(totalamount);
\t var tr_first_selected = $('tbody > tr:first > td:nth-child(2) > select option').filter(":selected");
\t // option:selected | .find(":selected") ~ .text(), ~.attr('value');
\t var selectedValue = tr_first_selected.val(), optionText = tr_first_selected.text().trim();
\t console.log(' Text : ', optionText);
\t console.log('Value : ', selectedValue);
\t // https://stackoverflow.com/a/39065147/5081877
\t $('tbody', this).append([
\t { sno: serialNumber, optionVal: selectedValue, price: tr_first_price }
\t ].map(dynamic_JS).join(''));
\t var last_optionSel = $('tbody#mainBody > tr:last > td:nth-child(2) > select');
\t last_optionSel.val(selectedValue);
\t
\t tr_first_input.val(0);
\t
\t // https://stackoverflow.com/a/13089959/5081877
\t var first_optionSel = $('#productOption');
//$('tbody > tr:first > td:nth-child(2) > select ');
\t first_optionSel.val(0);
return;
});
});
var totalamount = 0; // tr#mainRow
$('table#productTable > tbody ').on('keyup', 'input', function(e) {
var total =
$(e.delegateTarget)
.find('input')
.map(function() {
return parseFloat($(this).val()) || 0;
})
.get()
.reduce(function(a, b) {
return a + b;
});
\t $('#total').text(total);
});
<!-- Remove row - javascript & Jquery -->
$('.remove-row').on('click', function() {
\t $("#productTable").each(function() {
// added total minus deleting element price.
\t \t $(this).closest('tr').remove();
\t });
});<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<table id="productTable" class="table table-hover table-bordered">
<thead>
<tr>
<th>No.</th><th>Product</th><th>Price</th><th>Action</th>
</tr>
</thead>
<tbody id="mainBody">
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td>
Expected Total:<span id="total">0</span><br>
Added Total:<span id="totalAdd">0</span>
</td>
<td></td>
</tr>
</tfoot>
</table>
<button type="button" class="add-new btn btn-info" id="add-new">Add New Income</button>
<script id="hidden-template" type="text/x-custom-template">
<tr id="mainRow">
\t <td>${sno}</td>
\t <td>
\t \t <select name="selectProduct" id="productOption" class="form-control" selected="${optionVal}">
\t \t <option value="0"> -- Select One --</option>
\t \t <option value="1"> IPhone </option>
\t \t <option value="2"> MAC </option>
\t \t <option value="3"> Windows </option>
\t \t </select>
\t </td>
\t <td>
\t \t <input id="number_only" pattern="[0-9]" type="text" class="form-control" />
\t </td>
\t <td><!-- glyphicon-plus | glyphicon-remove -->
\t \t <button type="button" class="add-new btn btn-info glyphicon glyphicon-plus"></button>
\t </td>
</tr>
</script>
</body>＃1片段 - 使用JavaScript onclick function删除当前行工作正常。
function removeRow(onclickTAG) {
// Iterate till we find TR tag.
while ((onclickTAG = onclickTAG.parentElement) && onclickTAG.tagName != 'TR');
onclickTAG.parentElement.removeChild(onclickTAG);
}
为jsfiddle - test部分和平面HTML文件中的代码是不是 - 至少工作与JavaScript。
- 无法删除|呼叫删除行功能。同时删除行从
Added Total中删除价格。 - 我应该只允许输入标签的编号，但它只适用于第一行输入元素。
Input type must be text only. type number allows these like {.+-}
荫不能将其作为解决新jQuery和它的XPath元素导航。
有问题，在你的代码，同时结合问题，删除键以及为关键事件。检查[这里]（https://jsfiddle.net/eone11bn/3/） – Bhumika107