JSFiddle - React, Tailwind, and code Playground

by Dai Duong

HTML

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<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" /><br/>
  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>

JavaScript

<!--Phải để code jquery chạy dưới cùng-->
$('#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("");
      }
    }
  }
});