By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,569 Members | 1,181 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,569 IT Pros & Developers. It's quick & easy.

javascript not woking in ie7

chathura86
100+
P: 227
hi

i wrote the following code to populate a table dynamically

it works perfectly on Firefox

but not in IE 7
does not show any errors on IE7 either

please help me

chathura bamunusinghe

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6. <script language="javascript">
  7.     //itemname, key, unitprice, warranty, Description, brand
  8.     //generate this array using php
  9.     var selectboxoptions = new Array     
  10.                         (    
  11.                             new Array ("-SELECT-", 0, 0, "-NULL-", "-NULL-", new Array("-NULL-")),
  12.                             new Array ("Key Board", 1, 500.00, "12 months", "aaaaaaaaaaaa", new Array("Samsung", "Sony", "Azus")),     
  13.                             new Array ("Mouse", 2, 1500.00, "6 months", "sssssssssssss", new Array("Hitachi", "Sony", "Azus")), 
  14.                             new Array ("LCD", 3, 2500.00, "9 months", "ddddddddddddd", new Array("Hitachi", "Samsung", "Azus"))
  15.                         );
  16.  
  17.     //load item and fill the row
  18.     function loadItem(selecteditem,  rownumber){
  19.         var rows = document.getElementById('tbl').getElementsByTagName('tr');
  20.         var row = rows[rownumber-1];
  21.         var columns = row.getElementsByTagName('td');
  22.         var itemid = searchItem(selecteditem);
  23.         columns[2].innerHTML = selectboxoptions[itemid][2];
  24.         columns[5].innerHTML = selectboxoptions[itemid][3];
  25.         columns[6].innerHTML = selectboxoptions[itemid][4];
  26.  
  27.         var selectBrand = document.createElement("select");
  28.         for(i = 0; i < selectboxoptions[itemid][5].length; i++) selectBrand.options[i] = new Option(selectboxoptions[itemid][5][i], selectboxoptions[itemid][5][i]);
  29.         columns[4].appendChild(selectBrand);
  30.     }
  31.  
  32.     //reset counter onload
  33.     function onLoad(){
  34.         var noofrows = document.getElementById('noofrows');
  35.         noofrows.value = 0;
  36.     }
  37.  
  38.     //search the item and return array index
  39.     function searchItem(itemid){
  40.         for(i=0; i<selectboxoptions.length; i++){
  41.             if(selectboxoptions[i][1] == itemid) return i;
  42.         }
  43.         return -1;
  44.     }
  45.  
  46.     //add new row
  47.     function addRow(id, noofrows){
  48.  
  49.         var noofrows = document.getElementById(noofrows);
  50.         var count = parseInt(noofrows.value);
  51.         count++;
  52.  
  53.         var tbody = document.getElementById(id);
  54.  
  55.         var row = document.createElement("tr");
  56.  
  57.         //column 1
  58.         var td1 = document.createElement("td");
  59.         td1.appendChild(document.createTextNode(count));
  60.  
  61.         //column 2
  62.         var td2 = document.createElement("td");
  63.         var selectbox1 = document.createElement("select");
  64.         //selectbox1.setAttribute("onchange", loadItem(count));
  65.         selectbox1.onchange = function() {
  66.             loadItem(this.options[this.selectedIndex].value, count);
  67.         }        
  68.         for(i = 0; i < selectboxoptions.length; i++) selectbox1.options[i] = new Option(selectboxoptions[i][0], selectboxoptions[i][1]);
  69.         td2.appendChild(selectbox1);
  70.  
  71.         //column 3
  72.         var td3 = document.createElement("td")
  73.         td3.appendChild (document.createTextNode(" "))
  74.  
  75.         //column 4
  76.         var td4 = document.createElement("td")
  77.         var selectbox2 = document.createElement("select");
  78.         for(i = 0; i < 15; i++) selectbox2.options[i] = new Option(i+1, i+1);
  79.         td4.appendChild(selectbox2);
  80.  
  81.         //column 5
  82.         var td5 = document.createElement("td")
  83.         td5.appendChild (document.createTextNode("-"))
  84.  
  85.         //column 6
  86.         var td6 = document.createElement("td")
  87.         td6.appendChild (document.createTextNode("-"))
  88.  
  89.         //column 7
  90.         var td7 = document.createElement("td")
  91.         td7.appendChild (document.createTextNode("-"))
  92.  
  93.         row.appendChild(td1);
  94.         row.appendChild(td2);
  95.         row.appendChild(td3);
  96.         row.appendChild(td4);
  97.         row.appendChild(td5);
  98.         row.appendChild(td6);
  99.         row.appendChild(td7);
  100.  
  101.         tbody.appendChild(row);
  102.         noofrows.value = count;
  103.      }
  104. </script>
  105. </head>
  106.  
  107. <body onload="onLoad()">
  108. <input type="hidden" value="0" id="noofrows" />
  109. <table id="tbl">
  110.  
  111. </table>
  112. <a href="#" onclick="addRow('tbl', 'noofrows')">add row</a>
  113.  
  114. </body>
  115. </html>
  116.  
Jul 13 '08 #1
Share this Question
Share on Google+
3 Replies


acoder
Expert Mod 15k+
P: 16,027
You need to append it to the tbody instead of the table - see this link.
Jul 13 '08 #2

chathura86
100+
P: 227
Thanks a lot

it works perfectly in ie7 now

chathura bamunusinghe
Jul 17 '08 #3

acoder
Expert Mod 15k+
P: 16,027
Glad to hear it and you're welcome :)
Jul 17 '08 #4

Post your reply

Sign in to post your reply or Sign up for a free account.