JSFiddle - React, Tailwind, and code Playground

by Dai Duong

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<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">

CSS

.onColor{
  background: red;
}

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

  });
});