javascript - 如何使用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

这是一个jsFiddle。

使用jQuery 的 Append。

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

Answer 3

解释

首先，让我解释一下innerHTML而不是的用法.append()：

性能。

---

JSFiddle

---

解决方案

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

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 表格编辑方式。请参阅此线程：如何使用 javascript 从另一个页面编辑表格内容。 相关的演示。

Answer 4

var name = 'yourInputName';

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

并为您的表（或一个类，或任何您想要的，并更新 $('#myTable') 中的选择器）提供一个 id。

Answer 5

$("#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>');    
        }
});