使用jQuery更新行表（数据网格）时出现问题

Question

我正在尝试编辑表格中的一行（数据网格）。问题是：我没有更新点击的行，而是创建了一个新行。我想要的是更新我在模态窗口中单击的行，我无法实现...似乎我错过了我的函数中对应于模态窗口的那一行的表示按下“save-btn”吧？

html:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
    <table id="main-table" class="table">
            <thead>
            <tr class="box_round">
                <td>Date</td>
                <td>Entry</td>
                <td>Invoice</td>
                <td>text</td>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td><a class="inData" href="">17.17.17</a></td>
                <td><a class="inData" href="">50123</a></td>
                <td><a class="inData" href="">Invoice</a></td>
                <td><a class="inData" href="">Hola señor</a></td>

              <td><a class="deleteItem" href="#"><i class="icon-trash"></i></a></td>
              <td><a href="#secondModal" role="" class="edit" data-toggle="modal"><i class="icon-edit"></i></a></td>
            </tr>
<!--
*************************************************************************
<!--
*************************************************************************
-->
        <div id="secondModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
                <div class="modal-header">
                    <button style="position: relative; left: 27px; top: -23px; opacity: 1" type="button" class="close" data-dismiss="modal" aria-hidden="true"><img src="gfx/btn-close-popup.png" alt=""/></button>
                    <h3 id="myModalLabel">Day book</h3>
                </div>
                <div class="modal-body">

                    <div class="FormItems">
                        <ul>
                            <div class="box">
                            <ul>
                                <li class="innerBox innerFloat"><p>Type</p><input class="in-type input-small" type="text" >
                                </li>
                                <li class="innerBox innerFloat"><p>Entry</p><input class="in-entry input-small" type="text" >
                                </li>
                                <li class="innerBox"><p>Date</p>
                                    <input class="in-calender input-small datepicker" type="text" style="">
                                </li>
                            </ul>
                            </div>

                            <div class="box">
                                <ul>

                                    <li class="innerBox"><p>Text</p><input id=".text" class="in-text input-medium" type="text"/></li>

                                </ul>
                            </div>

                        </ul>
                    </div>

                </div>
                <div class="modal-footer">
                    <button class="btn real" data-dismiss="modal" aria-hidden="true">Close</button>
                    <button class="btn btn-primary">Save changes</button>
                </div>
       </div>

</body>
</html>

JQUERY

function deleteItem(){
    $(this).parent().parent().remove();
    console.log('working');
}

$('#main-table').on('click', '.deleteItem', deleteItem);



$('#main-table').on('click', '.edit', function(){
    var entry, calender, amount, text, currency, account_no, invoice, contra_account;
     var row = $(this).parents('tr');

         var getData_obj = {

            calender : $('#main-table .inData:eq(0)').text(),
            entry : $('#main-table .inData:eq(1)').text(),
             text : $('#main-table .inData:eq(3)').text(),
            amount : $('#main-table .inData:eq(4)').text(),
            account_no : $('#main-table .inData:eq(5)').text(),
            contra_account : $('#main-table .inData:eq(6)').text(),
            currency : $('#main-table .inData:eq(7)').text()
        }


    $('#secondModal .in-calender').val(getData_obj.calender);
    $('#secondModal .in-entry').val(getData_obj.entry);
    $('#secondModal .in-text').val(getData_obj.text);

    $('#secondModal .btn-primary').on('click', function(){

        var secondData_obj = {

            calender : $('#secondModal .in-calender').val(),
            entry : $('#secondModal .in-entry').val(),
            val :$('#secondModal .in-val').val(),
            text: $('#secondModal .in-text').val()
        }

        $('#main-table tbody').append(
                '<tr>' +
                        '<td><a class="inData" href="">'+secondData_obj.calender+'</a></td>'+
                        '<td><a class="inData" href="">'+secondData_obj.entry+'</a></td>' +
                        '<td><a class="inData" href="">'+secondData_obj.invoice+'</a>' +
                        '<td><a class="inData" href="">'+secondData_obj.text+'</a>' +

                        '<td><a class="deleteItem" href="#"><i class="icon-trash"></i></a></td>'+
                        '<td><a href="#secondModal" role="" class="" data-toggle="modal"><i class="icon-edit"></i></a></td>'+

                        '</tr>'
        );

    });




}

);

Answer 1

另一答案