Passing tables from C# code behind to a javascript function

Question

I have a user control that is part of an update panel. The user control is a heading( tag) and a asp Table. The asp:Table is defined in the ascx file only with the headers. The contents of this table are updated dynamically from the code behind by reading a csv file. This set up is within an Update panel which updates every minute. After every minute the csv file gets updated and hence the table needs to be updated.

Here is the tricky part. Before the table is I updated I need to save a copy of the old table and then update the new table. Once the new table is updated and the page is about to be loaded I need to call a javascript function from in the page_load handler and pass the two tables. Inside the javascript function I need to compare the old table and the new table cell by cell and do some work based on the result of the comparison.

Here is how I copy the data from the table to another table before updating it.

TableCell tableCell;
TableRow tableRow;
for (int i = 0; i < Table1.Rows.Count; i++)
{
    tableRow = new TableRow();
    for (int j = 0; j < Table1.Rows[i].Cells.Count; j++)
    {
        tableCell = new TableCell();
        tableCell.Text = Table1.Rows[i].Cells[j].Text;
        tableRow.Cells.Add(tableCell);
    }
    oldTable.Rows.Add(tableRow);
}

But for some reason when I pass the tables to the javascript function and access the cells in javascript I see only the headers and not any values in the old table. But when I access the cells in my code behind itself I can see the values.

My HTML is

<table id="ContentPlaceHolderBody_ContentPlaceHolderBody_TradxPriceTable_5_oldTable" ClientID="oldTable">
    <tr>
        <td colspan="3">6M EURIBOR</td>
        <td colspan="3">6M EURIBOR</td>
    </tr><tr>
         <td>Instr</td>
         <td>Bid</td>
         <td>Ask</td>
         <td>Instr</td>
         <td>Bid</td>
         <td></td>
    </tr><tr>
         <td></td>
         <td></td>
         <td></td>
         <td colspan="3">BASIS 3s6s</td>
    </tr><tr>
          <td></td>
          <td></td>
          <td></td>
          <td>Instr</td>
          <td>Bid</td>
          <td>Ask</td>
    </tr><tr>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
    </tr>
</table>

My javascript is

function foo(table1,table2)
{
   var oldTable = document.getElementById(table1);
   var newTable = document.getElementById(table2);
   alert(oldTable.rows[2].cells[1].innerHTML+" "+newTable.rows[2].cells[1].innerHTML);
}

Answer 1

use html tables and form a string with the tables and the values and pass that string to javascript.

string newTable = "<Table><Tr><Td>"+ somevalue +"</Td></Tr></Table>"

in javascript

var newT = '<%= newTable %>'