Wednesday, April 5, 2017

Dynamically add table-elements to a table

This is html to dynamically add table-elements to a table.
Below is a link and a button to add table-elements to an existing table.



Click to append


Name


<head>
    <script type='text/javascript'>
        function appendScheduleBikou() {
            if (!document.createElement) return;

            var tr_e = document.createElement("tr");
            var td_e1 = document.createElement("td");
            var text = document.createTextNode("Name");
            td_e1.appendChild(text);
            tr_e.appendChild(td_e1);
         
            var td_e2 = document.createElement("td");
            tr_e.appendChild(td_e2);
            var input_e = document.createElement("input");
            input_e.setAttribute("type", "input");
            input_e.setAttribute("value", "John");
            td_e2.appendChild(input_e);

            document.getElementById("generate-here").appendChild(tr_e);
        }
    </script>
</head>
<body>
    <a href='javascript:appendScheduleBikou();'>click</a>
    <table >
        <tbody id="generate-here">
            <tr><td>Name</td><td><input value="Jack"></td>
        </tbody>
    </table>
</body>