22 July 2017

JQuery: Lấy giá trị của từng dòng trên TABLE bằng Click Event JQuery

Click để lấy giá trị trên table
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) {
                    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();*/
                        $('#soHoaDon').val(soHoaDon);
                        $('#thueGTGT').val(thueGTGT);
                    });

                });
            });
        </script>

    </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

 

BACK TO TOP

Xuống cuối trang