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

Errr，实际上该代码中的this指向了保存按钮。所以也删除它。

从该行的输入字段添加表行和数据

1 个答案: