title: Passing tables from C# code behind to a javascript function
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>Here is how I copy the data from the table to another table before updating it.</p>
  
  <pre><code>TableCell tableCell;
  TableRow tableRow;
  for (int i = 0; i &lt; Table1.Rows.Count; i++)
  {
      tableRow = new TableRow();
      for (int j = 0; j &lt; 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);
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>My HTML is </p>
  
  <pre><code>&lt;table id="ContentPlaceHolderBody_ContentPlaceHolderBody_TradxPriceTable_5_oldTable" ClientID="oldTable"&gt;
      &lt;tr&gt;
          &lt;td colspan="3"&gt;6M EURIBOR&lt;/td&gt;
          &lt;td colspan="3"&gt;6M EURIBOR&lt;/td&gt;
      &lt;/tr&gt;&lt;tr&gt;
           &lt;td&gt;Instr&lt;/td&gt;
           &lt;td&gt;Bid&lt;/td&gt;
           &lt;td&gt;Ask&lt;/td&gt;
           &lt;td&gt;Instr&lt;/td&gt;
           &lt;td&gt;Bid&lt;/td&gt;
           &lt;td&gt;&lt;/td&gt;
      &lt;/tr&gt;&lt;tr&gt;
           &lt;td&gt;&lt;/td&gt;
           &lt;td&gt;&lt;/td&gt;
           &lt;td&gt;&lt;/td&gt;
           &lt;td colspan="3"&gt;BASIS 3s6s&lt;/td&gt;
      &lt;/tr&gt;&lt;tr&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;Instr&lt;/td&gt;
            &lt;td&gt;Bid&lt;/td&gt;
            &lt;td&gt;Ask&lt;/td&gt;
      &lt;/tr&gt;&lt;tr&gt;
           &lt;td&gt;&lt;/td&gt;
           &lt;td&gt;&lt;/td&gt;
           &lt;td&gt;&lt;/td&gt;
           &lt;td&gt;&lt;/td&gt;
           &lt;td&gt;&lt;/td&gt;
           &lt;td&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>My javascript is </p>
  
  <pre><code>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);
  }
  </code></pre>