Javascript select in table cell
Question
I want to add a select (dropdown) to every row in my table. The table is created using Javascript and has dynamic content imported from xml files using JQuery. I managed to import all content successfully, however the dropdowns are displayed in the last row only. I would appreciate if you can assist me to have the dropdown in every row.
Below is a code extract with blank selects only (the imported content is stored in those elements). All outputs such as "row " is for testing purpose only. "Numrows" are for testing purpose as well.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta charset="utf-8" >
<title>table select test</title>
</head>
<body>
<table id="scrolltable">
</table>
<script type="text/javascript">
var tabbody = document.getElementById("scrolltable");
var types = document.createElement("select");
var units = document.createElement("select");
parseTable(3, types, "row ", units);
function parseTable(numrows, types, limits, units) {
for (i = 0; i < numrows; i++) {
var row = document.createElement("tr");
var cell1 = document.createElement("td");
cell1.style.width="300px";
cell1.appendChild(types);
row.appendChild(cell1);
var cell2 = document.createElement("td");
cell2.innerHTML = limits + i;
cell2.style.width = "100px";
row.appendChild(cell2);
var cell3 = document.createElement("td");
cell3.appendChild(units);
row.appendChild(cell3);
tabbody.appendChild(row);
}
}
</script>
</body>
</html>
2 answers
solution1
1 2014-09-01 13:41:32
types and units are defined once, so they are single elements. So they are moved to where you last called appendChild. If you want to see what happens, try adding alert(''); before ending your for loop and see it in action for every row.
If you want to add it in every row then you need new instances at each itterration:
function parseTable(numrows, types, limits, units) {
for (i = 0; i < numrows; i++) {
var row = document.createElement("tr");
var cell1 = document.createElement("td");
cell1.style.width="300px";
types = document.createElement("select");
cell1.appendChild(types);
row.appendChild(cell1);
var cell2 = document.createElement("td");
cell2.innerHTML = limits + i;
cell2.style.width = "100px";
row.appendChild(cell2);
var cell3 = document.createElement("td");
units = document.createElement("select");
cell3.appendChild(units);
row.appendChild(cell3);
tabbody.appendChild(row);
}
}
solution2
0 ACCPTED 2014-09-01 13:41:30
Without a minimum example, it may be difficult to pinpoint the issue, but my guess is:
You create the types and units elements only before your loop, so you are appending the same objects over and over, and each time you append one of them to a cell, you take it from the original cell and put it into the new one. Thats what "appendChild" does, it doesn't clone the element, it uses the same one ( http://www.w3schools.com/jsref/met_node_appendchild.asp ).
If you create a new select element in every step of your for, you should be fine =)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.