如何使用JavaScript动态添加行 [英] How do I add rows dynamically using javascript

问题描述

在这里，当用户单击"AddNewRow"按钮时，我正在表中动态添加行.这是动态添加行的代码，

我尝试过的事情:

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

What I have tried:

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

在这里，当用户单击"AddNewRow"按钮时，我将在表中动态添加行.这是动态添加行的代码，

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>

用于添加行的按钮代码.添加新行

当我单击"Addnewrow"按钮时，它将动态添加另一行.但是这里是添加行，但是row将第一行值作为默认值.但是我不需要第一行在另一行中选择值.上面的代码中有任何错误.

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.

推荐答案

方法如下: ^ ].

首先，请注意以下方法:
Node.insertBefore()— Web API | MDN [ ^ ]，
Node.appendChild()-Web API | MDN [ ^ ].

您可以假定所有HTML元素对象都是从Node派生的.这就是您所需要的.

—SA

This is how: Node — Web APIs | MDN[^].

First of all, pat attention for these methods:
Node.insertBefore() — Web APIs | MDN[^],
Node.appendChild() — Web APIs | MDN[^].

You can assume that all HTML element objects are derived from Node. This is all you need.

—SA

这篇关于如何使用JavaScript动态添加行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！