CODEWITHSUNDEEP
javascriptselecthtml-table
Otto
Otto

Reputation: 59

Javascript select in table cell

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>

Upvotes: 0

Views: 840

Answers (2)

Giannis Paraskevopoulos
Giannis Paraskevopoulos

Reputation: 18411

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);
    }
}

Upvotes: 1

Gabriel Pires
Gabriel Pires

Reputation: 366

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 =)

Upvotes: 0

Related Questions