我有一个HTML表,该页面在页面加载时会创建行,该行的末尾有一个十字按钮,所以我想做的是,当我单击该按钮时,我想将值保留在当前行,我还有import "react-native"
import React from "react"
import { shallow } from "enzyme"
import MyWebView from "../../App/Components/MyWebView"
test("Should render CustomHeader", () => {
const wrapper = shallow(<MyWebView />)
expect(wrapper).toMatchSnapshot()
})
,ItemName
,I Code
,因此,当我单击该按钮时,我想要一些字段值,我的所有单元格仅以输入字段的形式出现
我在做什么
Price
function rowappend(tbody) {
const markup =
`<tr>
<td>
<input type="text" class="form-control commanChange" id="itemNametd" name="itemNametd">
</td>
<td><input type="text" name="itemCodetd" id="itemCodetd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
<td><input type="text" name="mrptd" id="mrptd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
<td><input type="text" name="purRatetd" id="purRatetd" class="form-control commantd"></td>
<td>
<input type="tel" id="unitQtytd"class="form-control commanChange" name="unitQtytd">
</td>
<td>
<input type="tel" id="discPercentagetd"class="form-control commanChange" name="discPercentagetd" value="0.00">
</td>
<td><input type="text" name="discAmttd" id="discAmttd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
<td><input type="text" name="gstPercentagetd" id="gstPercentagetd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
<td><input type="text" name="gstAmttd" id="gstAmttd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
<td><input type="text" name="totalAmttd" id="totalAmttd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
<input type="hidden" name="unittd" id="unittd" class="form-control commantd">
<td style="background-color: white;border: 1px white"><i class="fas fa-times fa-2x remove-btn" ></i></td>
</tr>`
$(tbody).append(markup);
}
rowappend($('tbody', '#tableInvoice'));
$(document).on("click", ".remove-btn", function(e) {
$.confirm({
title: '',
content: 'Do you want to clear ?',
buttons: {
Yes: () => {
keys: ['enter', 'space']
action: function() {
var tr = $(this).closest('tr');
var td = tr.find("td").eq(4);
var input = td.find('input');
alert(input.val())
tr.remove();
},
},
No: function() {
},
}
})
}) $(document).keypress(function(event) {
const row = event.target.parentElement.parentElement
var keycode = event.keyCode || event.which;
if (keycode == '13') {
if (event.target.matches('[name=discPercentagetd]')) {
if ($(row).parent().find('tr').length - $(row).index() === 1) {
rowappend(event.target.parentElement.parentElement.parentElement)
}
}
}
});
答案 0 :(得分:1)
您可以将onclick事件用于“ .remove-btn”。
/* Adding onclick event */
<i class="fas fa-times fa-2x remove-btn" onclick="fnRemoveRow(this);"></i>
/*Javascript code */
function fnRemoveRow(_this)
{
var $tr=$(_this).closest('tr');
var itemName = $tr.find("#itemNametd").val();
/* Get other values */
$tr.remove();
}
答案 1 :(得分:1)
$(this)
是指<i class="fas fa-times fa-2x remove-btn" ></i>
,因此$(this).find('td')
将不返回任何内容。您需要使用$(this).closest('tr')
首先获得该行。
function rowappend(tbody) {
const markup =
`<tr>
<td>
<input type="text" class="form-control commanChange" id="itemNametd" name="itemNametd">
</td>
<td><input type="text" name="itemCodetd" id="itemCodetd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
<td><input type="text" name="mrptd" id="mrptd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
<td><input type="text" name="purRatetd" id="purRatetd" class="form-control commantd"></td>
<td>
<input type="tel" id="unitQtytd"class="form-control commanChange" name="unitQtytd">
</td>
<td>
<input type="tel" id="discPercentagetd"class="form-control commanChange" name="discPercentagetd" value="0.00">
</td>
<td><input type="text" name="discAmttd" id="discAmttd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
<td><input type="text" name="gstPercentagetd" id="gstPercentagetd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
<td><input type="text" name="gstAmttd" id="gstAmttd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
<td><input type="text" name="totalAmttd" id="totalAmttd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
<input type="hidden" name="unittd" id="unittd" class="form-control commantd">
<td style="background-color: white;border: 1px white"><i class="fas fa-times fa-2x remove-btn" ></i></td>
</tr>`
$(tbody).append(markup);
}
rowappend($('tbody', '#tableInvoice'));
$(document).on("click", ".remove-btn", function(e) {
$.confirm({
title: '',
content: 'Do you want to clear ?',
buttons: {
Yes: {
keys: ['enter', 'space'],
action: () => {
var tr = $(this).closest('tr');
var td = tr.find("td").eq(4);
var input = td.find('input');
alert(input.val())
tr.remove();
}
},
No: function() {
},
}
})
})
$(document).keypress(function(event) {
const row = event.target.parentElement.parentElement
var keycode = event.keyCode || event.which;
if (keycode == '13') {
if (event.target.matches('[name=discPercentagetd]')) {
if ($(row).parent().find('tr').length - $(row).index() === 1) {
rowappend(event.target.parentElement.parentElement.parentElement)
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<div class="row tableGrn" id="commonDvScroll">
<table class="table table-bordered" id="tableInvoice">
<thead>
<tr>
<th id="itemNameth" class="commanth">Item Name</th>
<th id="itemCodeth" class="commanth">I Code</th>
<th id="mrpth" class="commanth">MRP</th>
<th id="purRateth" class="commanth">Price</th>
<th id="unitQtyth" class="commanth">Unit Qty</th>
<th id="discPercentageth" class="commanth">Disc %</th>
<th id="discAmtth" class="commanth">Disc Amt</th>
<th id="gstPercentageth" class="commanth">GST %</th>
<th id="gstAmtth" class="commanth">GST Amt</th>
<th id="totalAmtth" class="commanth">Total Amt</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
答案 2 :(得分:0)
首先,找出该十字形按钮的父级,然后找出其值。
如果要创建多行,请确保不要使用ID,并且不要使用ID进行访问,因为它应该是唯一的,并且我认为此列表中的行会更多
$('.remove-btn').click(function(e) {
/* First find out parent of X button then inside that find input element and then value.
I have added here the name while finding the perticular value you can use the id as well but it will not work if more then 1 row.
*/
alert($(this).parent().parent().find('input[name="itemNametd"]').val())
$(this).closest('tr').remove();})}