22 July 2017

JQuery: onkeyup Bắt sự kiện nhập giá trị vào input không cần Enter với HTML + JQuery

 Bắt sự kiện nhập giá trị vào input không cần Enter với HTML + JQuery
JQuery 2017
<html>
    <head>
        <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
        <script type="text/javascript">
            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("");
                    }
                }
            }

        </script>

    </head>
    <br/>
    <body>
        <h3>Nhập số hóa đơn ==> hiển thị Thuế VAT</h3>
        Số hóa đơn: <input type="text" name="soHoaDon" id="soHoaDon" onkeyup="myFunction()" />
        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>
    </body>
</html>
Run demo

0 nhận xét:

Post a Comment

 

BACK TO TOP

Xuống cuối trang