使用Javascript动态添加行

Question

Here I am adding rows dynamically in table when user clicks "AddNewRow" button. Here is the code for adding rows dynamilly,

<script type="text/javascript">
        function addRow() {

            var table = document.getElementById("modaltable"); //Table ID
            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);
            var colCount = table.rows[1].cells.length;

            for (var i = 0; i < colCount; i++) {
                var newcell = row.insertCell(i);
                newcell.innerHTML = table.rows[1].cells[i].innerHTML;
                //alert(newcell.childNodes);
                switch (newcell.childNodes[0].type) {
                    case "Comment":
                        newcell.childNodes[i].value = "";
                        break;
                    case "DropDownList2":
                        newcell.childNodes[i].selectedIndex = 0;
                        break;
                    case "DropDownList1":
                        newcell.childNodes[i].selectedIndex = 0;
                        break;
                }
            }
        }
      </script>

Button code for adding rows. Add New Row

When I click "Addnewrow" button it will add another row dynamically. But here it is adding the row but row is taking the first row value as default. But I don't need first row selected values in another rows. Any mistake in the above code.

Answer 1

The new rows value is repeated because of this line

newcell.innerHTML = table.rows[1].cells[i].innerHTML;

new cell value is copied from existing rows cell value.

so just refer to this line to update the new rows cell value, like this

newcell.innerHTML = 'newVal'+(i+1) ;

Live Demo @ JSfiddle

Answer 2

If you don't need first row selected values in the new dynamically generated rows, you need to replace the following code:

newcell.innerHTML = table.rows[1].cells[i].innerHTML;

with

newcell.innerHTML = "";