Sự kiện bấm nút Enter compare giá trị nhập với giá trị trong bảng Đưa con trỏ focus tới input khác
JQuery 2017
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<br/>
<body>
<h3>Nhập số hóa đơn bấm enter ==> không load lại form ==> Đưa con trỏ đến input số lượng</h3>
<form action="abc">
Số hóa đơn: <input type="text" id="soHoaDon" />
Số lượng: <input type="text" id="soLuong" />
Thuế VAT: <input type="text" id="thueGTGT" /><hr/>
</form>
<table id="tb1" border="1">
<tr>
<th>Số hóa đơn</th>
<th>Thuế VAT</th>
</tr>
<tr>
<td class="tdHDMH1">1</td>
<td class="tdHDMH1">1100</td>
</tr>
<tr>
<td class="tdHDMH1">2</td>
<td class="tdHDMH1">2200</td>
</tr>
<tr>
<td class="tdHDMH1">3</td>
<td class="tdHDMH1">3300</td>
</tr>
</table>
<!--Phải để code jquery chạy dưới cùng-->
<script type="text/javascript">
$('#soHoaDon').keypress(function (event) {
//Bắt sự kiện nhấn nút Enter
if (event.keyCode == 13 || event.which == 13) {
event.preventDefault(); //Không cho load form
var input, filter, table, tr, td, i, count = 1, row;//Khai báo biến
input = $("#soHoaDon").val();//Lấy value từ id
table = document.getElementById("tb1");
tr = table.getElementsByTagName("tr");
row = table.rows.length;//lấy số dòng của bảng
// loop
for (i = 0; i < tr.length; i++) {
//Dòng i lấy đối tượng với class tdHDMH1 thứ nhất trả về true | false
td = tr[i].getElementsByClassName("tdHDMH1")[0];
if (td) {
//Lấy giá trị thẻ td thứ nhất compare với input vừa nhập vào trả về true | false
if (td.innerHTML == input) {
//Set giá trị của td thứ hai vào id thueGTGT
$('#thueGTGT').val(tr[i].getElementsByClassName("tdHDMH1")[1].innerHTML);
//Chuyển con trỏ sang id soLuong
$('#soLuong').focus();
} else {
//Nếu giá trị nhập vào không có trong table thì đếm count + 1
count++;
}
}
}
//Lấy number count đếm được compare với length row lấy được ở trên
if (count == row) {
//Nếu nhập vào có chứa ký tự thì
if (input.length != 0) {
alert('Số hóa đơn này không tồn tại!');
$('#thueGTGT').val("");
} else {
//Nếu ko nhập gì reset id thueGTGT rỗng
$('#thueGTGT').val("");
}
}
}
});
</script>
</body>
</html>
Run demo
0 nhận xét:
Post a Comment