Add/Remove row in html table

(JQUERY)


Hi,
In this article i discuss about add/remove row in html table using jquery.

View:-

@{
    ViewBag.Title = "addremoveRows";
}

<h2>Add/Remove Rows</h2>

<input type="button" id="btn_addrow" value="Add Row" /> <br />
<input type="button" id="btn_deleterow" value="Delete Row" />

<table  id="tbl_customers">
    <thead>
        <tr>
<th>Customer ID</th><th>Name</th><th>Age</th><th>Account Type</th>
        </tr>
    </thead>
    <tbody>
        <tr>
<td>1</td><td>Ram</td><td>20</td><td>Student Account</td>
        </tr>
        <tr>
<td>2 </td><td>Balu</td><td>20</td><td>Student Account</td>
        </tr>
        <tr>
<td>3</td><td>Sidhu</td><td>25</td><td>Savings Account</td>
        </tr>
    </tbody>
 </table>


<script type="text/javascript">
    $(function () {

        var tbl = $('#tbl_customers');

        //on hover change the mouse pointer to hand
        $(tbl).find('tbody tr').hover(function () {
            $(this).css('cursor', 'pointer');
        });

        //on the click of the row add foreground color for deletion
        $(tbl).find('tbody tr').click(function () {
            $(tbl).find('tbody tr').removeClass('selectedRow');  //empty class, to identify row for deletion
            $(tbl).find('tbody tr').css('color', '');
            $(this).addClass('selectedRow');
            $(this).css('color', 'blue');
        });
      
    });



    //for delete row button click event
    $('#btn_deleterow').unbind("click").click(function () {

        //for removing the row from the grid
        var tbl = $('#tbl_customers');
        var noofRows = $(tbl).find('tbody tr').length;

        //for empty table without rows
        if (noofRows == 0) {
            return;
        }
        var tBody = $(tbl).find('tbody');
        var deleteRow = $(tBody).find('tr.selectedRow');
      
        var delCnt = $(deleteRow).html();
        if (delCnt == null) {
            customDialog("Warning", "Please select row to delete");
        }
        else {
            customDialog("Delete Confirmation", "Row Deleted Successfully");
            $(deleteRow).remove();
        }
    });

    //for add row button click event
    $('#btn_addrow').unbind('click').click(function () {

        //for adding dynamic rows

        //for getting no of cells
        var tbl = $('#tbl_customers');
        var gridhdrRow = $(tbl).find('thead tr').first();
        var gridhdrCell = $(gridhdrRow).find('th');
        var noofCells = 0;
        noofCells = $(gridhdrCell).index();
        //end of getting no of cells

        //for getting no of rows
        var rowLength = 0;
        rowLength = $(tbl).find('tbody tr').length;
        rowLength++;
        //end of getting no of rows

        //for empty table without header
        var tbl = $('#tbl_customers');
        var gridhdrRow = $(tbl).find('thead tr').first();
        var gridhdrCell = $(gridhdrRow).find('th');
        if ($(gridhdrCell).length == 0) {
            return;
        }
        //end of empty table without header


        //create rows dynamically
        //for empty table
        var dynmicRow = $('<tr></tr>');
        while (noofCells >= 0) {

            $(dynmicRow).append('<td style="width:80px;height:15px;"></td>');
            noofCells--;
        }
        var tbody = $(tbl).find('tbody');
        $(tbody).append(dynmicRow);
        //end of creating dynamic rows

        //on hover change the mouse pointer to hand
        $(tbl).find('tbody tr').hover(function () {
            $(this).css('cursor', 'pointer');
        });
     
        //on the click of the row add css for deletion
        $(tbl).find('tbody tr').click(function () {
       
            $(tbl).find('tbody tr').removeClass('selectedRow');
            $(tbl).find('tbody tr').css('color', '');


            $(this).addClass('selectedRow');
            $(this).css('color', 'blue');
        });
      
    });


    //for jquery custom dialog box
    function customDialog(headerValue, message) {

        //remove the existing div
        var divs = $('body').find('div[id="div_customDialog"]');

        $.each(divs, function (index, divItem) {
            $(divItem).remove();
        });

        //add new div
        $('body').append('<div id="div_customDialog"></div>');

        $('#div_customDialog').html(message);

        $('#div_customDialog').dialog({
            draggable: true,
            modal: true,
            resizable: false,
            width: 'auto',
            title: headerValue,
            minHeight: 75,
            buttons: {
                OK: function () {
                    $(this).dialog('close');
                    $(this).dialog('destroy');
                }
            }
        });

        $('#div_customDialog').dialog('open');
    }
   


</script>


Controller:-

 public ActionResult addremoveRows()
        {
            try
            {
                return View();
            }
            catch (Exception)
            { }
            return null;
        }



Image

Ratings


Average Rating: 0.00 by 0 users
Giri Prasad
7/17/2013
7/17/2013
Download PDF

Comments