Click để lấy giá trị trên table & set background
JQuery 2017
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<!--Có thể để code jquery chạy trên cùng-->
<script type="text/javascript">
$(function () {
$('#tb1 tr').click(function (e) {
//Backgroud Click row
$('.onRow').click(function () {
$(this).parents('#tb1').find('.onRow').each(function (index, element) {
$(element).removeClass('onColor');
});
$(this).addClass('onColor');
});
//Get values row
var soHoaDon = $(this).closest('.onRow').find('td:nth-child(1)').text();
var thueGTGT = $(this).closest('.onRow').find('td:nth-child(2)').text();
$('#choose').click(function (e) {
/*e.preventDefault();*/ //==> preventDefault() không load lại form nếu làm việc với form
$('#soHoaDon').val(soHoaDon);
$('#thueGTGT').val(thueGTGT);
});
});
});
</script>
<style>
.onColor{
background: red;
}
</style>
</head>
<br/>
<body>
<h3>Chọn row trên table ==> bấm OK ==> Lấy giá trị từ bảng hiển thị lên input</h3>
<form action="abc">
Số hóa đơn: <input type="text" id="soHoaDon"/>
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 class="onRow">
<td>1</td>
<td>1100</td>
</tr>
<tr class="onRow">
<td>2</td>
<td>2200</td>
</tr>
<tr class="onRow">
<td>3</td>
<td>3300</td>
</tr>
</table>
<input type="button" id="choose" value="OK">
</body>
</html>
Run demo
0 nhận xét:
Post a Comment