Coder Forum

JavaScript Code

function updateTable(){
 
 if(tableCounter > 0){
 
 update("deptTbl");
}
 
var chosenDepartmentIndex = document.getElementById("dOptions").selectedIndex; 
var chosenDepartment = document.getElementById("dOptions").options[chosenDepartmentIndex].text; 
 
var body = document.getElementsByTagName("body")[0]; 
var tbl = document.createElement("table"); 
var tblHead = document.createElement("thead"); 
var header = document.createElement("tr"); 
var headerCell1 = document.createElement("th"); 
var headerCell2 = document.createElement("th"); 
var headerCell3 = document.createElement("th"); 
 
var headerCellName = document.createTextNode("Name"); 
headerCell1.appendChild(headerCellName); 
header.appendChild(headerCell1); 
tblHead.appendChild(header); 
 
var headerCellTel = document.createTextNode("Telefon"); 
headerCell2.appendChild(headerCellTel); 
header.appendChild(headerCell2); 
tblHead.appendChild(header); 
 
var headerCellDept = document.createTextNode("Abteilung"); 
headerCell3.appendChild(headerCellDept); 
header.appendChild(headerCell3); 
tblHead.appendChild(header); 
tblHead.setAttribute("class", 'alt'); 
tblHead.style.borderSpacing = "0"; 
var tblBody = document.createElement("tbody"); 
 
var resultCounter = 0; 
 
var chosenNames = new Array(); 
var chosenNumbers = new Array(); 
var chosenDepts = new Array(); 
 
for (var j = 0; j < allDepts.length; j++) { 
 
if(allDepts[j] == chosenDepartment){ 
 
chosenNames[resultCounter] = allNames[j]; 
chosenNumbers[resultCounter] = allNumbers[j]; 
chosenDepts[resultCounter] = allDepts[j]; 
resultCounter++; 
} 
} 
 
for (var j = 0; j < chosenNames.length; j++) { 
 
var row = document.createElement("tr"); 
row.setAttribute("class", 'alt'); 
 
for (var i = 0; i < 3; i++) { 
 
var modRes = i % 3; 
 
if(modRes == 0){ 
 
var cell1 = document.createElement("td"); 
var cellText1 = document.createTextNode(chosenNames[j]); 
cell1.appendChild(cellText1); 
row.appendChild(cell1); 
 
}else if(modRes == 1){ 
 
var cell2 = document.createElement("td"); 
var cellText2 = document.createTextNode(chosenNumbers[j]); 
cell2.appendChild(cellText2); 
row.appendChild(cell2); 
}else{ 
var cell3 = document.createElement("td"); 
var cellText3 = document.createTextNode(chosenDepts[j]); 
cell3.appendChild(cellText3); 
row.appendChild(cell3); 
} 
 
} 
 
tblBody.appendChild(row); 
} 
 
tbl.appendChild(tblHead); 
tbl.appendChild(tblBody); 
tbl.setAttribute("id", "deptTbl"); 
 
body.appendChild(tbl); 
 
tableCounter++; 
}

Cascading Style Sheets

<style type="text/css"> 
table { 
border: solid #66CC99; 
border-width: 0px 1px 1px 0px; 
width: 400px; 
} 
th, td { 
border: solid #66CC99; 
border-width: 1px 0px 0px 1px; 
padding: 4px; 
} 
th { 
background-color: #339999; 
color: #FFFFFF; 
} 
tr.alt td { 
background-color: #EEEEEE; 
} 
tbody { 
height: 200px; 
width: 100%; 
overflow-y: auto; 
overflow-x: auto; 
} 
</style> 
<!--[if IE]> 
<style type="text/css"> 
div { 
position: relative; 
height: 200px; 
width: 400px; 
overflow-y: scroll; 
overflow-x: scroll; 
border: solid #66CC99; 
border-width: 0px 0px 1px 0px; 
} 
table { 
border-width: 1px 1px 0px 0px; 
} 
thead tr { 
position: absolute; 
top: expression(this.offsetParent.scrollTop); 
} 
tbody { 
height: auto; 
 
} 
table tbody tr:first-child td { 
padding: 29px 4px 4px 4px; 
} 
</style> 
<![endif]-->