Change (Rename) Table header cell value in jQuery

Last Reply 3 months ago By dharmendr

Posted 3 months ago

How to change the table header cell value in jquery 

Posted 3 months ago

Hi sathya2496,

Check this example. Now please take its reference and correct your code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#btnChage').on('click', function () {
                $('#tblCustomers tr').eq(0).find('th').eq(1).html('Contact Name');
            });
        });
    </script>
</head>
<body>
    <table id="tblCustomers" border="1" cellpadding="1" cellspacing="0">
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Country</th>
        </tr>
        <tr>
            <td>1</td>
            <td>John Hammond</td>
            <td>United States</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Mudassar Khan</td>
            <td>India</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Suzanne Mathews</td>
            <td>France</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Robert Schidner</td>
            <td>Russia</td>
        </tr>
    </table><br />
    <input id="btnChage" type="button" value="Change Header Text" />
</body>
</html>

Demo