将新行添加到包含单击按钮的下拉列表的表中 [英] Add new row to the table containing a drop down list on button click

问题描述

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

I want to add a new row on button click to a table. New Row will have one textbox and one drop-down. Dropdown (select element)'s options to be added from session attribute.

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

I am able to add textbox using following 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";
        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. 任何帮助表示赞赏.

I have one session attribute "types". I want to add one drop down list as other column to the row where options are to be added from types. I am setting the attribute "types" when page gets loaded. I am using Java Servlet for server side. Any help is appreciated.

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

推荐答案

如果您具有会话属性类型"，那么您可以这样做.发布您剩余的编码，以便我更新我的答案.

If u have session attribute "types" then u can do like this. Post ur remaining coding so i can update my answer.

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>

这篇关于将新行添加到包含单击按钮的下拉列表的表中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！