Adding dropdown list to new row on button click
19,483
function addRow(btn) {
var parentRow = btn.parentNode.parentNode;
var table = parentRow.parentNode;
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "text";
cell1.appendChild(element1);
var cell3 = row.insertCell(1);
//var element2 = document.createElement("input");
var element2 = document.createElement("select");
//element2.type = "select";
var option1 = document.createElement("option");
option1.innerHTML = "Option1";
option1.value = "1";
element2.add(option1, null);
var option2 = document.createElement("option");
option2.innerHTML = "Option2";
option2.value = "2";
element2.add(option2, null);
cell3.appendChild(element2);
}
Problem was with the commented lines. A select
element isn't an input
element. You can't have a <input type="select"/>
. Since an HTMLInputElement
doesn't have an add
method, addRow
threw an exception.
Author by
PhantomM
Updated on July 31, 2022Comments
-
PhantomM almost 2 years
I am trying to add a new row on button click. In my new row I am trying to add a Textbox and a dropdown list. I don't know what I am doing wrong ? Can anybody help me with this problem. Thanks in advance.
HTML
<table> <tr> <td><input type="text" name="data1" value="TempData" /></td> <td><button type="button" onClick ="addRow(this)">Add</button></td> </tr> </table>
Javascript function:
function addRow(btn) { var parentRow = btn.parentNode.parentNode; var table = parentRow.parentNode; var rowCount = table.rows.length; var row = table.insertRow(rowCount); var cell1 = row.insertCell(0); var element1 = document.createElement("input"); element1.type = "text"; cell1.appendChild(element1); var cell3 = row.insertCell(1); var element2 = document.createElement("input"); element2.type = "select"; var option1 = document.createElement("option"); option1.innerHTML = "Option1"; option1.value = "1"; element2.add(option1, null); var option2 = document.createElement("option"); option2.innerHTML = "Option2"; option2.value = "2"; element2.add(option2, null); cell3.appendChild(element2); }
JSFiddle http://jsfiddle.net/wAyhm/2/
-
PhantomM almost 11 yearsCan you suggest solution for the following question as well ? stackoverflow.com/questions/17255841/…
-
Vivek Sadh almost 11 yearsWhat is the meaning of the first 2 lines ? var parentRow = btn.parentNode.parentNode; var table = parentRow.parentNode;