Question

对Jquery来说是新手。在Scenario之后我有一个疑问。我创建了一个按钮。如果我单击按钮我需要在div中创建动态表。该动态表将包含

文本框（3）

下拉（3）

在tr，td内。需要根据按钮点击逐行添加。
怎么做？

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>JQUERY SAMPLES</title>
    <script src="~/Scripts/jquery-1.11.0.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#inputId").click(function () {
                var table = $(this).closest('table');
                if (table.find('input:text').length < 7) {
                    table.append('<tr><td style="width:200px;" align="right">Name <td> <input type="text" id="current Name" value="" /> </td></tr>');
                }
            });
        });

    </script>
</head>

<body>
     <input type="button" id="inputId" value="ADD"/>
     <div id="sss"></div>
</body>

Answer 1

你的html中没有表格试试这个，

<table>
     <tr><td><input type="button" id="inputId" value="ADD"/></td></tr>
</table>

Live Demo

Answer 2

以下是有关如何动态创建包含3列的表行的示例示例：

HTML：

<input type="button" id="inputId">Click me

<table id="mytable"></table>

JS：

$("#inputId").click(function () {
    var table = $('table#mytable');
    var row = $('<tr></tr>');
    var col = $('<td style="width:200px;" align="right"></td>');
    var text = $('<span>Hello</span>');
    var input = $('<input type="text">');
    var dropdown = $('<select></select>');
    row.append(col.clone().append(text));
    row.append(col.clone().append(input));
    row.append(col.clone().append(dropdown));
    table.append(row);
});

希望您可以根据需要混合匹配列。

JSFIddle

带控件的动态表

2 个答案: