单击按钮时，将新行添加到包含下拉列表的表中

Add new row to the table containing a drop down list on button click

本文关键字：下拉列表 包含 添加 按钮 新行 单击      更新时间：2023-09-26

我想在单击按钮时向表中添加新行。新行将有一个文本框和一个下拉列表。要从会话属性中添加的下拉菜单（选择元素）的选项。

我可以使用以下功能添加文本框。

    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";
        element1.name="abc";
        cell1.appendChild(element1);
        var cell3 = row.insertCell(1);
        var element2 = document.createElement("select");
        var option1 = document.createElement("option");
        option1.innerHTML = "Option1";
        option1.value = "1";
        element2.appendChild(option1, null);
    }

我有一个会话属性"类型"。我想将一个下拉列表作为另一列添加到要从类型添加选项的行中。我正在设置页面加载时的属性"类型"。我在服务器端使用Java Servlet。感谢您的帮助。

<c:forEach items="${types}" var="type">

如果你有会话属性"types"，那么你可以这样做。张贴你剩下的代码，这样我就可以更新我的答案了。

var Type = 'option 1';
function AddRow() {
    $('#tblTest').append(
        '<tr><td>' +
          '<input type="text" />' +
          '<select><option>' + Type + '</option></select>' +
        '</td></tr>');
}
<table id="tblTest">
    <tr>
        <td>
            <input type="text" name="data1" value="TempData" />
        </td>
        <td>
            <input type="button" value="Add" onclick="AddRow()" />
        </td>
    </tr>
</table>
相关文章：