使用jquery更新行表(数据网格)时出现问题

rsaepe 发布于 4 天前 datagrid 最后更新 4 天前 3 浏览

我试图编辑表格(数据网格)中的一行。问题是:不是更新点击行,而是创建一个新行。我想要更新我在模式窗口中单击的行,我不能让它发生......看起来我错过了在我的函数中对应于模式窗口的那一行表示,当我按下“save-btn”对不对? 这是文件:http://jsbin.com/iyubox/2/ 感谢你的时间!

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>'
        );
});
}
);
已邀请:

xid

赞同来自:

好吧,我提出了一个不使用ID的解决方案,但它并不是最好的解决方案,对于下一个解决方案,我会使用JSON和我认为的整个对象。 如果您需要与您正在做的类似的事情需要帮助,请查看此文件: http://jsbin.com/onacow/1/ OBS:它不是相同的HTML(节省了一些时间),但想法是一样的。

jneque

赞同来自:

您正在使用append,它只是向表中添加了新的tr标记。您需要找到一种方法来选择您要编辑的确切tr标记,删除其内容然后附加新信息。 从你的代码中查看替换这个...

$('#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>'
    );
有了这个...
  var tableBody = document.getElementById('main-table').getElementsByTagName('tbody');
  var tableRow = tableBody[0].getElementsByTagName('tr');
tableRow[0].innerHTML = '<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>';
您将编辑该行而不是添加新行,但这不是一个完美的解决方案。当您单击编辑图标以使其正常工作时,您仍需要一种方法来标识要编辑的行。 希望这可以帮助。