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 ==> hiển thị Thuế VAT</h3>
Số hóa đơn: <input type="text" name="soHoaDon" id="soHoaDon" />
Thuế VAT: <input type="text" name="thueGTGT" id="thueGTGT" /><hr/>
<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

document.getElementById("soHoaDon").onkeyup = function() {myFunction()};
function myFunction() {
  // Declare variables
  var input, filter, table, tr, td, i, count = 1, row;
  input = $("#soHoaDon").val();

  table = document.getElementById("tb1");
  tr = table.getElementsByTagName("tr");

  row = table.rows.length;
  // loop
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByClassName("tdHDMH1")[0];
    if (td) {
      if (td.innerHTML == input) {
        $('#thueGTGT').val(tr[i].getElementsByClassName("tdHDMH1")[1].innerHTML);
      } else {
        count++;
      }

    }
  }
  if (count == row) {
    if (input.length != 0) {
      alert('Số hóa đơn này không tồn tại!');
      $('#thueGTGT').val("");
    } else {
      $('#thueGTGT').val("");
    }
  }
}