在使用backbone.js更新spring mvc中的行之后，将值设置为jquery数据表

Question

我的项目有一个问题，当点击表格行按钮时，它会出现在html输入typ =＆＃34; text＆＃34;用户更新.Updation运行成功。我需要的是，当用户点击更新按钮时，更新的行必须替换为新行+另一个按钮再次更新。 的 HTML

<h1>Time Management</h1>

<fieldset>
    <h3>Update Test!</h3>
    <form action="#" th:action="@{/admin/updateTest.html}"
        th:object="${test}" id="formTest">
        <table>
            <tr>
                <td>Test Name</td>
                <td><input type="text" id="testName" required="required"
                    th:field="*{name}" disabled="disabled"/></td>
            </tr>
            <tr>
                <td>Max No.of Questions</td>
                <td><input type="text" id="questionNo" required="required"
                    th:field="*{maxNoQuestions}" onKeyUp="numericFilter(this);" /></td>
            </tr>
            <tr>
                <td>Max Time</td>
                <td><input data-format="hh:mm:ss" type="text" id="testTime"
                                required="required" th:field="*{maxTime}" />


                </td>
            </tr>
            <tr>
                <td><input type="button" value="Update" id="btnUpdate" /> <input
                    type="hidden" th:field="*{id}" id="hdnTestId" /></td>
                <td><label id="statusMsg"
                    style="color: red; size: portrait; font-size: small;"></label></td>
            </tr>
        </table>
    </form>
</fieldset>








<table id="tests"
    style="cellpadding: 0px; cellspacing: 0px; border: 0px;">
    <thead>
        <tr>
            <th width="5%">#</th>
            <th align="left">Test Name</th>
            <th align="left">Max No.of Questions</th>
            <th align="left">Max Time</th>
            <th align="left"></th>
        </tr>
    </thead>
    <tbody>

    </tbody>

</table>

下面的

是我更新的主干脚本。

脚本

var TimeManagementView = Backbone.View.extend({
        sTable:null,
        // target item.
        el : $("#adminContentOuterPnl"),
        render : function() {
            var data = {};
            // template
            var compiledTemplate = _.template(timeManagementTemplate, data);
            // append the item to the view's target
            this.$el.html(compiledTemplate);

            sTable = $('#tests').dataTable({
                "aoColumns" : [ null, null, null, null, null ],
                "sPaginationType" : "full_numbers"
            });
            //load data from db to table.
            this.loadSavedTests();
        },

        // Event Handlers
        events : {
            "click #btnUpdate" : "updateTest"

        },

        loadSavedTests : function() {
            $('#tests tbody tr').remove();

            $('#tests tbody').append('<tr><td><h4>...Loading...</h4></td></tr>');
            //Load the data in using jQuerys ajax call
            $.ajax({
                type : 'POST',
                url : 'loadAllTests.html',
                success: function(responseData) {

                    sTable.fnClearTable();
                    if(responseData.length > 0){
                         $.each(responseData, function(index,item) {
                             var rowCount = index+1;
                             sTable.fnAddData( [ rowCount,item['name'], item['maxNoQuestions'], item['maxTime'],'<input type="image" src="../resources/img/icons/edit.png" alt="Edit" onclick="editTest('+item['id']+',this); return false;" />' ]);
                            });
                    } 
                }
            });
        },
        updateTest : function(){

            $('#statusMsg').text("");

            if($('#testName').val()==''){
                $('#statusMsg').text("Test Name Can't Be Null");
                return false;
            }
            if($('#questionNo').val()==''){
                $('#statusMsg').text("Question No. Can't Be Null");
                return false;
            }
            if($('#testTime').val()==''){
                $('#statusMsg').text("Test Time Can't Be Null");
                return false;
            }

            $('#statusMsg').text("Updating...");



             $("#formTest").ajaxForm({

                    success : function(status) {
                        if (status == 1) {
                        //  addRowToTests(status.object);
                            testRow.find("td").eq(0).text($('#testName').val());
                            testRow.find("td").eq(1).text($('#questionNo').val());
                            testRow.find("td").eq(2).text($('#testTime').val());
                            $('#testName').val('');
                            $('#questionNo').val('');
                            $('#testTime').val('');
                            $('#statusMsg').text("Data Updated!");

                        } 
                    },
                    dataType : 'json'
                }).submit();



        }




    });

    return new TimeManagementView;
});

Answer 1

 $("#formTest").ajaxForm({

                success : function(status) {
                    console.log(status.statusCode);
                    if (status.statusCode == 0) {

                        testRow.find("td").eq(1).text('');
                        testRow.find("td").eq(2).text('');
                        testRow.find("td").eq(3).text('');
                        testRow.find("td").eq(4).text('');

                        testRow.find("td").eq(1).text($('#testName').val());
                        testRow.find("td").eq(2).text($('#questionNo').val());  
                        testRow.find("td").eq(3).text($('#testTime').val());
                        testRow.find("td").eq(4).html('<input type="image" src="../resources/img/icons/edit.png" alt="Edit" onclick="editTest('+status.object.id+'); return false;" />');


                        $('#testName').val('');
                        $('#questionNo').val('');
                        $('#testTime').val('');
                        $('#statusMsg').text("Data Updated!");

                    }else{
                        $('#statusMsg').text("No Change");
                    } 
                },
                dataType : 'json'
            }).submit();