Javascript 如何使用jquery动态生成tr中的输入字段

我有一个任务，通过点击一个按钮来创建输入字段

<table>
    <tr>
        <th>
            Name
        </th>
        <th>
            Age
        </th>
    </tr>
    <tr>
        <td>
            Nithin
        </td>
        <td>
            24
        </td>
    </tr>
</table>
<button id="btn">add row</button>

名称
年龄
尼钦
24
添加行

单击按钮，我想显示一个文本框，允许用户向表中添加内容

如何做到这一点

编辑：- 我想考虑上面的TD。它必须基于上面的TD计数< /P> <代码> var name =‘YouNuPoName’生成；

var name = 'yourInputName';

$('#btn').on('click', function(name) {
    $('#myTable').append('<input type="text" name="' + name + '" />');
});

$（'#btn'）。在（'click'，函数（名称）{ $（'#myTable'）。追加（''）； }); 并为您的表（或类，或任何您想要的内容）提供一个id，并在$（“#myTable”）中更新选择器。

$（“#btn”）。on（'click'，function（）{
变量计数=$（'table'）。children（'tbody'）。children（'tr'）。children（'td'）。长度；
对于（var i=0；i，这里是一个

使用

$（“#btn”）。单击（函数（）{
$（“表格”）。附加（“”）；
});
这里有一个提琴，它将新行添加到表中，每个新行上都有两个新的输入字段单击按钮：
按钮35; btn
：

小提琴：

纯jQuery源代码：

$(document).ready(function() {
    $('button#btn').click(function() {
        var new_row = $('<tr>');

        var input_name = $('<input>').attr({
            type: 'text',
            placeholder: 'Your Name',
            name: 'names[]'
        });

        var input_age = $('<input>').attr({
            type: 'text',
            placeholder: 'Your Age',
            name: 'ages[]'
        });

        var column_name = $('<td>').append( input_name );
        var column_age = $('<td>').append( input_age );

        new_row.append( column_name ).append( column_age );

        $('table').first().find('tbody').append( new_row );
    });
});

$（文档）.ready（函数（）{
$（'button#btn'）。单击（函数（）{
var new_行=$（''）；
变量输入\u名称=$（''）.attr({
键入：“文本”，
占位符：“您的名字”，
名称：“名称[]”
});
变量输入\年龄=$（''）.attr({
键入：“文本”，
占位符：“您的年龄”，
姓名：“年龄[]”
});
变量列名称=$（''）.append（输入名称）；
变量列年龄=$（''）.append（输入年龄）；
新增行。追加（列名称）。追加（列日期）；
$（'table'）.first（）.find（'tbody'）.append（新行）；
});
});
说明
首先，让我解释一下
innerHTML
而不是
.append（）
的用法：




解决方案
在按钮下添加以下HTML代码
#btn
：

HTML

添加新行

CSS
#addRow{
显示：无；
}

JavaScript/jQuery
/*我们点击#btn#*/
$（文档）.on（'click'，'btn'，函数（）{
/*我们显示添加行表单（或隐藏它）*/
$（'#addRow'）。滑动切换（）；
/*我们还更改了#btn的文本
如有必要，输入为空*/
if（$（this.text（）=“添加行”）$（this.text（'hide form'）；
否则{
$（'年龄，'姓名'）.val（''；
$（this）.text（'添加行'）；
}
});
/*这里我们使用.innerHTML添加一个新行*/
$（'#createNewRow'）。在（'单击'，函数（）{
var name=$（'#name'）.val（），
年龄=$（'#年龄'）.val（）；
$（'table tbody'）[0]。innerHTML+=“”+name+“”+age+“”；
});


可供替代的
您可以使用AJAX/HTML表格编辑方式。请参阅以下线程：
.
您想在新行中添加输入字段，还是想在标题后的第一行中添加输入字段？请提供所需的输出以及一些代码。下次您应该更清楚地回答您的问题，而不是因为您不清楚而对其他人投反对票……这不对。您是对的。对不起。它将破坏表结构…^如果需要附加内容，则需要附加到
中，然后它是tr，而不是td…在这里，您只需放置tr td。但我想在上述tr的基础上动态创建。为什么要动态创建它？您不能静态创建它并在需要时显示它吗？这将附加输入在按钮中…^您需要附加到一个
，在这里您只需添加tr td。但我想在上面的基础上动态创建tr@Nithu（更新）单击时动态插入基于计数的输入。@screenmutt“单击按钮时，我想显示一个文本框，允许用户向表中添加内容。”在编辑之前，OP没有指出它应该是jQuery中的table.HTML样式，还有什么…那些应该是
行
和
列
，我的错。现在它们都是HTML标记。我更新了代码和JSFIDLE。在这里你这样写年龄名称。我的问题是它必须更改。字段来自数据库，所以它必须更改。@Nithu改变它：）
$("#btn").click(function() {
    $("table").append('<tr><td colspan="2"><textarea rows="50" cols="5"></textarea></td></tr>');
});

$(document).ready(function() {
    $('button#btn').click(function() {
        var new_row = $('<tr>');

        var input_name = $('<input>').attr({
            type: 'text',
            placeholder: 'Your Name',
            name: 'names[]'
        });

        var input_age = $('<input>').attr({
            type: 'text',
            placeholder: 'Your Age',
            name: 'ages[]'
        });

        var column_name = $('<td>').append( input_name );
        var column_age = $('<td>').append( input_age );

        new_row.append( column_name ).append( column_age );

        $('table').first().find('tbody').append( new_row );
    });
});

/* We we click the #btn# */
$(document).on('click', '#btn', function () {

    /* We show the add row form (or hide it) */
    $('#addRow').slideToggle();

    /* We also change the text of the #btn 
       and empty inputs if necessary       */
    if ($(this).text() == "add row") $(this).text('hide form');
    else {
        $('#age,#name').val('');
        $(this).text('add row');
    }
});

/* Here we add a new row using .innerHTML */
$('#createNewRow').on('click', function () {
    var name = $('#name').val(),
        age = $('#age').val();

    $('table tbody')[0].innerHTML += "<tr> <td>" + name + "</td><td>" + age + "</td></tr>";
});