title: HTML page taking too much time to load and page is becoming irresponsive
body: <p>My web page is taking too much time to load.
  reason is that page have a HTML table which has around 3000 columns and every column has a text box within it.
  Is there a way so that I can reduce the loading time or suggest if there is any other alternative.</p>
  
  <p>thanks in advance</p>
  
  <p>EDIT - Ok let me tell you the exact senerio, my table needs to show the date wise data and the Date (like 14-Dec-2012) will be the column header itself. the latest date will be the first column, then the past dates will comes across, some thing like (14-Dec-2012|13-Dec-2012|12-Dec-2012.....) every day when system date changes a new column would be added as the first column. There are around 200 rows.
  Its an JSP page and in a for loop I am creating the table header first, then in second for loop creating the table cells containing the values in textbox (so that user can edit them anytime). </p>
  
  <p>code sample - 
  Header -  </p>
  
  <pre><code>&lt;%
      Date today = new Date();
      String col = "";
      today = RDUtils.addDays(today, 1);
  for(int i=0;i&lt;=columnCount;i++){
      today = RDUtils.addDays(today, -1);
      col = RDUtils.getStringDateCol(today);
  %&gt;
  &lt;th class="TableHeader"&gt;&lt;div&gt;&lt;%=col%&gt;&lt;/div&gt;&lt;/th&gt;
  &lt;%} %&gt;
  </code></pre>
  
  <p>Table cells - </p>
  
  <pre><code>for(int j=0;j&lt;=columnCount;j++){%&gt;
      &lt;input maxlength="5" onblur="fillZero(this);" onFocus='clearField(this);' onkeypress="if (checkEnter())return false;" onkeyup='if (checkEnter()) move("&lt;%=i %&gt;");' size="5" type="text" name="txtEntry&lt;%=de.getId()%&gt;" value="&lt;%=val%&gt;" id="&lt;%=de.getId()%&gt;"/&gt;&lt;/div&gt; &lt;/td&gt;
  </code></pre>
  
  <p>JS functions - </p>
  
  <pre><code>function checkEnter(e){
      characterCode = e.keyCode;
      return characterCode == 13;
  }
  function fillZero(obj){
  if(obj.value==''){
      obj.value = 0;
  }
   }
   function clearField(obj){
  var perfix = obj.name.substring(8, obj.name.length);
  var chkObj = document.getElementById('deCheck'+perfix);
  if(!chkObj.checked)chkObj.checked=true;
  if(obj.value==0){
      obj.value = '';
  }
   }
  </code></pre>