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

Question

我有一项任务是通过点击按钮来创建输入字段。

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

点击按钮我想显示一个文本框，允许用户将内容添加到表格中。

如何做到这一点？

编辑： - 我想考虑上面的td。它必须基于上面的td计数生成

Answer 1

这是一个小提琴，它会在您的桌子上添加新行，每次点击按钮时都会有两个新的输入字段：button#btn：

小提琴：jsfiddle.net/8e7ww/1/

纯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 );
    });
});

Answer 2

var name = 'yourInputName';

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

给你的表（或一个类，或任何你想要的东西，并在$（'＃myTable'）中更新选择器）。

Answer 3

$("#btn").on('click', function() { 
        var count = $('table').children('tbody').children('tr').children('td').length; 
        for ( var i =0; i <count; i++ ) { 
          $('table tbody').append('<tr><td><input type="text"/></td></tr>');    
        }
});

Answer 4

这是jsFiddle。

使用jQuery's Append。

$("#btn").click(function() {
    $("table").append('<tr><td colspan="2"><textarea rows="50" cols="5"></textarea></td></tr>');
});

Answer 5

说明

首先，让我解释使用innerHTML代替.append()：

Performance

---

JSFiddle

---

解决方案

在按钮#btn下添加以下HTML代码：

HTML

<div id="addRow">
    <input type="text" id="name" value="" />
    <input type="text" id="age" value="" />
    <button id="createNewRow">Add new row</button>
</div>

CSS

#addRow {
    display:none;
}

的JavaScript / jQuery的

/* 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>";
});

---

替代

您可以使用AJAX / HTML表编辑方式。请参阅此主题：How to edit table contents from another page using javascript. The related demo