04/10/2018, 20:18

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

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().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 !

Tags: jQuery

Chuyên Mục: Javascript

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

Bài liên quan

Cách sử dụng DISTINCT để loại bỏ giá trị trùng lắp trong MySQL

Khi truy vấn dữ liệu từ table, bạn có thể nhận được những giá trị trùng lắp, và để loại bỏ những giá trị này, chúng ta sẽ sử dụng từ khóa DISTINCT trong câu lệnh SELECT . Cú pháp sử dụng DISTINCT như sau : SELECT DISTINCT columns FROM table_name WHERE where_conditions Để các bạn ...

Bùi Văn Nam viết 20:18 ngày 04/10/2018

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

Tạ Quốc Bảo viết 20:18 ngày 04/10/2018

[Ubuntu]Cách thêm, xóa, vô hiệu hóa ppa trong ubuntu – Howto add, remove, disable ppa in ubuntu

[Ubuntu]Cách thêm, xóa, vô hiệu hóa ppa trong ubuntu – Howto add, remove, disable ppa in ubuntu Tháng Năm 13, 2013 nguyenvanquan7826 Linux Leave a response 1. Thêm ppa sudo add-apt-repository ppa:someppa/ppa Ví dụ: (ppa này ...

Bùi Văn Nam viết 21:34 ngày 01/10/2018

Google loại bỏ hàng loạt mã độc quảng cáo ra khỏi Play Store

Với sự tăng trưởng của thị trường di động, mã độc quảng cáo (Adware) trở thành một trong những mối đe dọa phổ biến nhất. Adware thường được sử dụng để đẩy quảng cáo hiển thị trên màn hình của người dùng nhằm mục đích kiếm tiền. Vấn đề càng trở nên phức tạp do Adware dần được trang bị với những ...

Hoàng Hải Đăng viết 11:31 ngày 18/09/2018

Apple loại bỏ hàng loạt ứng dụng can thiệp kết nối mã hóa

Apple vừa mới làm sạch App Store với hàng loạt ứng dụng can thiệp vào băng thông mã hóa thông qua cài đặt chứng chỉ gốc. Theo thông báo mới nhất trên website của mình Apple cho biết: “Chúng tôi đã loại bỏ nhiều ứng dụng từ App Store cài đặt chứng chỉ gốc có thể cho phép theo dõi dữ liệu. ...

Trần Trung Dũng viết 10:15 ngày 18/09/2018
0