Cách thêm hoặc loại bỏ hàng (row) trong Table với jQuery

Có rất nhiều bạn trẻ mới học về javascript có hỏi mình nhiều lần về cách thêm cũng như xóa bỏ một hàng trong bảng dữ liệu, vì bận bịu cũng như thời gian có hạn nên đến hôm nay mình mới có thể viết một bài về đề tài này. Qua bài viết này, các bạn sẽ hiểu thêm về cấu trúc của jQuery cũng như những hàm thực thi của nó.

Xem Demo | Download

HTML

Để minh họa, mình giả sử có đoạn html chứa table như sau :

<form>
        <input type="text" id="name" placeholder="Name">
        <input type="text" id="email" placeholder="Email Address">
    	<input type="button" class="add-row" value="Add Row">
    </form>
    <table>
        <thead>
            <tr>
                <th>Select</th>
                <th>Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" name="record"></td>
                <td>Peter Parker</td>
                <td>peterparker@mail.com</td>
            </tr>
        </tbody>
    </table>
    <button type="button" class="delete-row">Delete Row</button>

CSS

Các bạn có thể dùng đoạn css bên dưới để định dạng các thẻ html cho dễ nhìn.

form{
        margin: 20px 0;
    }
    form input, button{
        padding: 5px;
    }
    table{
        awidth: 100%;
        margin-bottom: 20px;
		border-collapse: collapse;
    }
    table, th, td{
        border: 1px solid #cdcdcd;
    }
    table th, table td{
        padding: 10px;
        text-align: left;
    }

jQuery

Và đây chính là chìa khóa của vấn đề, chúng ta chỉ sử dụng phương thức .append() và .remove() có trong jQuery để thực hiện việc thêm và xóa cột.

<script src="jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $(".add-row").click(function(){
            var name = $("#name").val();
            var email = $("#email").val();
            var markup = "<tr><td><input type='checkbox' name='record'></td><td>" + name + "</td><td>" + email + "</td></tr>";
            $("table tbody").append(markup);
        });
        
        // Find and remove selected table rows
        $(".delete-row").click(function(){
            $("table tbody").find('input[name="record"]').each(function(){
            	if($(this).is(":checked")){
                    $(this).parents("tr").remove();
                }
            });
        });
    });    
</script>

Chúc các bạn thành công !

Chuyên Mục: Javascript

Bài viết được đăng bởi webmaster