jquery - 从该行的输入字段中添加表格行和数据

Question

我有一个表格和一个带有 2 个输入字段的表格。

一旦用户输入输入字段并单击保存...它会转到表格行。

现在用户再次输入并单击保存...它会替换旧条目。

我要在输入字段中添加一个带有新文本的新行，用户在单击保存之前键入该文本。

<table class="table table-bordered table1">
    <thead>
        <tr class="info">
            <td>ID</td>
            <td>Name</td>
            <td>Access</td>
            <td>Delete</td>
            <td>Edit</td>
        </tr>
    </thead>
    <tbody>
        <tr class="info">
            <td class="mac-id">&nbsp;</td>
            <td class="nameofUser">&nbsp;</td>
            <td class="access">&nbsp;</td>
            <td class="btn-delete"><a href="#" class="trash-icon">&nbsp;</a></td>
            <td class="btn-edit"><a href="#" class="edit-icon">&nbsp;</a></td>
        </tr>
    </tbody>
</table>
</div>
<div class="buttons">
    <a href="#" class="btn btn-primary btn-new">New</a>
    <a href="#" class="btn btn-success btn-save">Save</a>
    <a href="#" class="btn btn-warning btn-cancel">Cancel</a>
</div>

    </table>

jQuery

$(".btn-save").click(function(e) {
    var macID       =   $("#mac-address").val(this);
    var nameofUser  =   $("#user-name").val(this);
    var access      =   $("#access option:selected").text(this);

    $(".table1 tr:last").after("<tr class='info'><td>&nbsp;</td><td></td><td></td><td></td><td></td></tr>");


});

http://jsfiddle.net/isherwood/UFCeh/

Answer 1

看起来您只需将输入值添加到您的代码中：

$(".btn-save").click(function(e) {
    var macID       =   $("#mac-address").val();
    var nameofUser  =   $("#user-name").val();
    var access      =   $("#access option:selected").text();

    $(".table1 tr:last").after("<tr class='info'><td>" + macID + 
        "</td><td>" + nameofUser + "</td><td>" + access + "</td>" +
        "<td class='btn-delete'><a href='#' class='trash-icon'>&nbsp;</a></td>" +
        "<td class='btn-edit'><a href='#' class='edit-icon'>&nbsp;</a></td>");    
});

错误，实际上该this代码中的内容指向保存按钮。所以也删除它。