Change (Rename) Table header cell value in jQuery

Last Reply one month ago By dharmendr

Posted one month ago

How to change the table header cell value in jquery 

Posted one month 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