Modify Gridview as it's being rendered through javascript

Question

I'm trying to modify a field in each row of my gridview as it is rendered. I need to modify it with client side Javascript. I'm somewhat new to asp.net, but I think I should be doing something with clientscriptmanager.

I came up with a simple scenario which is basically what I want to do to avoid getting bogged down in the details. If I could accomplish the following I could accomplish my goal.

Say I have a grid view of names and salaries. I want to double each persons salary before displaying it. Obviously I can do it in the code behind, but due to the nature of the more complex actual thing I'm doing, I need to do it in javascript

 <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" 
            onrowdatabound="GridView1_RowDataBound" >
            <Columns>
              <asp:BoundField HeaderText="Full Name" DataField="Name"  ></asp:BoundField>
             <asp:BoundField HeaderText="Salary" DataField="Salary" />
            </Columns>

Answer 1

This probably isn't what you're looking for, but i would use a template field in the case you are citing. Or better yet, modify the data being returned from the datastore to already have the value calculated.

<asp:TemplateField HeaderText="Salary">
  <ItemTemplate>
     <%#Eval("Salary") * 2 %>
  </ItemTemplate>
</asp:TemplateField>

There are a lot of reasons you wouldn't do this with client side scripting. For one, it can be disabled on the browser. Plus, you are relying on the client to perform calculations that would be more efficiently and appropriately run on the server.

Answer 2

Its for sure that this won't be a good approach. If javascript is disabled in your browser then you won't get the actual data, which won't be desirable.

Anyways something like this will do it. Using jQuery

$("#GridView1 tr td:nth-child(2)").each ( function(){
    var value = parseInt($(this).text(),10 ) * 2;
    $(this).text(value);
});