"If at first you don't succeed; call it version 1.0" :-Unknown

Pages

Tuesday, September 28, 2010

Using jQuery to Delete a Row in a Table by just Clicking on it

Here’s a very simple way of deleting a row in a table, when a user clicks on it. With jQuery, the efforts required to achieve this requirement is just 2 lines of code.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.3.2.js"
    type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('table tr.del').click(function() {
                $(this).remove();
            });
        });
    </script>
</head>
<body>
<table border="1">
    <tr class="del">
        <td>Row 0 Column 0</td>
        <td >Row 0 Column 1</td>
    </tr>
    <tr class="del">
        <td>Row 1 Column 0</td>
        <td>Row 1 Column 1</td>
    </tr>
    <tr class="del">
        <td>Row 2 Column 0</td>
        <td>Row 2 Column 1</td>
    </tr>
    <tr class="del">
        <td>Row 3 Column 0</td>
        <td>Row 3 Column 1</td>
    </tr>
     <tr class="del">
        <td>Row 4 Column 0</td>
        <td>Row 4 Column 1</td>
    </tr>
     <tr class="del">
        <td>Row 5 Column 0</td>
        <td>Row 5 Column 1</td>
    </tr>
</table>
</body>
</html>


Have a nice day... 'N happy Coding :)
Posted by

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)