javascript - 使用内联创建行创建表

Question

我需要使用行的内联创建来创建表。

即如果您单击该按钮，则会创建一行。

它将添加新的空行(有两个字段，如下面的代码所示)，我应该怎么做？我已经尝试使用以下代码但没有成功，知道该怎么做吗？

Javascript:

$(document).ready(function () 
{
    $(".createrow").hide();
});

$("#add").click(function () 
{
    $(".createrow").toggle();
});

HTML:

<div class="content">
    <div class="form-inline">
        <h4>Role</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            <button type='button' id='.createrow' class="btn ui-state-default medium"  style="width: 200px;">
            Create
            </button>
            @Html.LabelFor(model => model.name, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @*@Html.EditorFor(model => model.name, new { htmlAttributes = new { @class = "form-control" } })*@

                @Html.ValidationMessageFor(model => model.name, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.checkBox1, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <div class="checkbox">
                    @*@Html.EditorFor(model => model.checkBox1)*@
                    @Html.ValidationMessageFor(model => model.checkBox1, "", new { @class = "text-danger" })
                </div>
            </div>
        </div>

Answer 1

我不完全确定您的要求是什么，但据我所知，也许像下面这样的内容会有所帮助？

根据按钮按下在表格中创建新行。

工作示例:JSfiddle

Jquery

$('#addrow').click( function() {
    $('#table').append('<tr><td>New Row</td></tr>');
});

示例 HTML

<button id='addrow'>Add row</button>
<table id='table'>
    <tbody>
    <tr>
        <td>row</td>
    </tr>
    </tbody>
</table>

已更新要使行出现在行的顶部而不是之前，请将 append 替换为 prepend工作示例:JSfiddle