javascript - Change the values of the 2nd column when a user clicks on the heading of the 2nd column of a table -

i have table on page , wondering if possible change values of 2nd column when user clicks on heading of 2nd column.

for example,

----------------------------- | 1st heading | 2nd heading |       |-------------|-------------|            |             |             | |             |             | |             |             | |             |             | |             |             | 

now when user clicks on "2nd heading" value of second column change , name of heading change ( 2nd heading 3rd heading )

this simple task using jquery. first add id columns. second heading column should this

without jquery

<th id="th2" onclick="changeval()">2nd heading</th>      <script>     function changeval() {     document.getelementbyid("th2").innerhtml = "3rd heading";     }     </script> 

with jquery section has been updated. added data-state attribute column head, when toggle values record last change.

 <th id="th2" data-state="2">2nd heading</th> 

add jquery code after linking jquery file

<script type="javascript" src="path_to_jquery.js" />  <script>     $("#th2").click(function() {     var state = $(this).attr("data-state");      if(state=="2") {     $(this).html("3rd heading");     $(this).attr("data-state", "3");     } else if(state=="3") {     $(this).html("2nd heading");     $(this).attr("data-state", "2");     }     });  //you can replace $(this) $("#th2") or thr id of element or table cell manipulate value inside </script> 

try out , give feedback