Change html table column header text

(JQUERY)


Hi,
In this article i discuss about  changing the  html table column header text using jquery.

View:-

@{
    ViewBag.Title = "modifycolumnHeader";
}

<h2>Modify Column Header</h2>

<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');

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


        //open jquery dialog to modify column header on double click of column header
        $(tbl).find('thead tr th').unbind('dblclick').dblclick(function () {
            var currentHeader = $(this);
            var oldheaderText = $(this).html();
            custominputDialog(currentHeader, oldheaderText);

        });

    });

    //for jquery custom dialog box
    function custominputDialog(currentHeader, oldheaderText) {

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

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

        //add new div
        $('body').append('<div id="div_custominputDialog"><input type="text" id="txt_colheader"/></div>');

        var txtinput = $('#div_custominputDialog').find('#txt_colheader');
        $(txtinput).val(oldheaderText);
      
        $('#div_custominputDialog').dialog({
            draggable: true,
            modal: true,
            resizable: false,
            width: 'auto',
            title: 'Modify header',
            minHeight: 75,
            buttons: {
                OK: function () {
                    $(currentHeader).html($('#div_custominputDialog').find('#txt_colheader').val());

                    $(this).dialog('close');
                    $(this).dialog('destroy');
                },
                CANCEL: function () {
                    $(this).dialog('close');
                    $(this).dialog('destroy');
                }
            }
        });

        $('#div_custominputDialog').dialog('open');
    }
</script>


Controller:-

  public ActionResult modifycolumnHeader()
        {
            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