编辑按钮上的表格行单击meteor.js

Question

我正在表格中添加表单中的详细信息，但是当我点击编辑按钮更新所选行时，我遇到了一些问题。

我想编辑该行，以便在单击编辑按钮时该行成为文本框。

以下是模板：

<template name="empForm">
    <div class="container">
        <form>
            <div class="row" style="margin-left:330px;">
                <div class="form-group col-sm-2">
                    <label for="name">Name:</label>
                    <input type="text" class="form-control" name="empName" style="height:40px;">
                </div>
                <div class="form-group col-sm-2">   
                    <label for="email">Email:</label>
                    <input type="email" class="form-control" name="email" style="height:40px;">
                </div>
                <div class="form-group col-sm-2">
                    <label for="address">Address:</label>
                    <textarea class="form-control" rows="3" name="address"></textarea>
                </div>
            </div>
            <div class="btn-style">
                <input type="submit" name="submit" value="Submit" class="btn btn-success">
                <input type="reset" name="reset" value="Reset" class="btn btn-primary">
            </div><br>
        </form>
        <table class="table table-bordered table-hover">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Address</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                {{#each emp}}
                <tr>
                    {{#if isdocumentId}}
                    <td><input type="text" name="{{empName}}"></td>
                    <td><input type="text" name="{{empEmail}}"></td>
                    <td><input type="text" name="{{empAddress}}"></td>
                    <td>
                        <a href="#" class="remove-emp btn btn-danger glyphicon glyphicon-trash"></a>
                        <a href="#" class="edit-emp btn btn-success glyphicon glyphicon-edit"></a>
                    </td>
                    {{else}}
                    <td>{{name}}</td>
                    <td>{{empEmail}}</td>
                    <td>{{empAddress}}</td>
                    <td>
                        <a href="#" class="remove-emp btn btn-danger glyphicon glyphicon-trash"></a>
                        <a href="#" class="edit-emp btn btn-success glyphicon glyphicon-edit"></a>
                    </td>
                    {{/if}}
                </tr>
                {{/each}}
            </tbody>
        </table>

    </div>
</template>

这是我的事件处理程序：

'click .edit-emp': function()
    {
        event.preventDefault();
        var documentId = this._id;
        var empNameDetail = $('[name=empName]').val();
        var empEmail = $('[name=email]').val();
        var empAddress = $('[name=address]').val();
        var confirm = window.confirm("Update Item?");
        if(confirm)
        {
            Employees.update({_id: documentId}, {set: {name: empNameDetail, empEmail, empAddress}});
        }
    }
});