• How to Delete Rows from Table using Javascript

    Posted on February 16, 2013 by in Javascript, Other Programming

    <html>
    <head runat="server">
        <title></title>    
        <link type="text/css" rel="Stylesheet" href="Styles.css" />
        <script language="javascript" type="text/javascript">
            function fnDeleteRows() {
                for (var i = document.getElementById("tblProducts").rows.length; i > 1; i--) {
                    document.getElementById("tblProducts").deleteRow(i - 1);
                }
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>        
        <a href="javascript:fnDeleteRows();">Delete All</a>
        <table id="tblProducts" runat="server" class="tableClass">  
                <tr>  
                    <th>Product ID</th><th>Product Number</th>  
                    <th>Product Name</th><th>Price</th>                  
                </tr>  
                <tr>  
                    <td>100</td><td>Adjustable Race</td>  
                    <td>AR-5381</td><td>50</td>                  
                </tr>
                <tr>  
                    <td>101</td><td>Bearing Ball</td>  
                    <td>BA-8327</td><td>150</td>                  
                </tr>
                <tr>  
                    <td>102</td><td>Headset Ball Bearings</td>  
                    <td>BE-2349</td><td>250</td>                  
                </tr>  
        </table> 
        </div>
        </form>
    </body>
    </html>

    Delete Rows from Table using Javascript 1

    Clicking on DeleteAll link will clear all rows from table.
    Delete Rows from Table using Javascript 2

    Be Sociable, Share!
      Post Tagged with , , ,

    Written by

    View all articles by

    Email : [email protected]

    Leave a Reply