227
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
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>Untitled Document</title>
- <script language="javascript">
- //itemname, key, unitprice, warranty, Description, brand
- //generate this array using php
- var selectboxoptions = new Array
- (
- new Array ("-SELECT-", 0, 0, "-NULL-", "-NULL-", new Array("-NULL-")),
- new Array ("Key Board", 1, 500.00, "12 months", "aaaaaaaaaaaa", new Array("Samsung", "Sony", "Azus")),
- new Array ("Mouse", 2, 1500.00, "6 months", "sssssssssssss", new Array("Hitachi", "Sony", "Azus")),
- new Array ("LCD", 3, 2500.00, "9 months", "ddddddddddddd", new Array("Hitachi", "Samsung", "Azus"))
- );
- //load item and fill the row
- function loadItem(selecteditem, rownumber){
- var rows = document.getElementById('tbl').getElementsByTagName('tr');
- var row = rows[rownumber-1];
- var columns = row.getElementsByTagName('td');
- var itemid = searchItem(selecteditem);
- columns[2].innerHTML = selectboxoptions[itemid][2];
- columns[5].innerHTML = selectboxoptions[itemid][3];
- columns[6].innerHTML = selectboxoptions[itemid][4];
- var selectBrand = document.createElement("select");
- for(i = 0; i < selectboxoptions[itemid][5].length; i++) selectBrand.options[i] = new Option(selectboxoptions[itemid][5][i], selectboxoptions[itemid][5][i]);
- columns[4].appendChild(selectBrand);
- }
- //reset counter onload
- function onLoad(){
- var noofrows = document.getElementById('noofrows');
- noofrows.value = 0;
- }
- //search the item and return array index
- function searchItem(itemid){
- for(i=0; i<selectboxoptions.length; i++){
- if(selectboxoptions[i][1] == itemid) return i;
- }
- return -1;
- }
- //add new row
- function addRow(id, noofrows){
- var noofrows = document.getElementById(noofrows);
- var count = parseInt(noofrows.value);
- count++;
- var tbody = document.getElementById(id);
- var row = document.createElement("tr");
- //column 1
- var td1 = document.createElement("td");
- td1.appendChild(document.createTextNode(count));
- //column 2
- var td2 = document.createElement("td");
- var selectbox1 = document.createElement("select");
- //selectbox1.setAttribute("onchange", loadItem(count));
- selectbox1.onchange = function() {
- loadItem(this.options[this.selectedIndex].value, count);
- }
- for(i = 0; i < selectboxoptions.length; i++) selectbox1.options[i] = new Option(selectboxoptions[i][0], selectboxoptions[i][1]);
- td2.appendChild(selectbox1);
- //column 3
- var td3 = document.createElement("td")
- td3.appendChild (document.createTextNode(" "))
- //column 4
- var td4 = document.createElement("td")
- var selectbox2 = document.createElement("select");
- for(i = 0; i < 15; i++) selectbox2.options[i] = new Option(i+1, i+1);
- td4.appendChild(selectbox2);
- //column 5
- var td5 = document.createElement("td")
- td5.appendChild (document.createTextNode("-"))
- //column 6
- var td6 = document.createElement("td")
- td6.appendChild (document.createTextNode("-"))
- //column 7
- var td7 = document.createElement("td")
- td7.appendChild (document.createTextNode("-"))
- row.appendChild(td1);
- row.appendChild(td2);
- row.appendChild(td3);
- row.appendChild(td4);
- row.appendChild(td5);
- row.appendChild(td6);
- row.appendChild(td7);
- tbody.appendChild(row);
- noofrows.value = count;
- }
- </script>
- </head>
- <body onload="onLoad()">
- <input type="hidden" value="0" id="noofrows" />
- <table id="tbl">
- </table>
- <a href="#" onclick="addRow('tbl', 'noofrows')">add row</a>
- </body>
- </html>
