我正在尝试编辑表格中的一行（数据网格）。问题是：我没有更新点击的行，而是创建了一个新行。我想要的是更新我在模态窗口中单击的行，我无法实现...似乎我错过了我的函数中对应于模态窗口的那一行的表示按下“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>'
);
});
}
);
您正在使用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>';
您将编辑该行而不是添加新行，但这不是一个完美的解决方案。当您单击编辑图标以使其正常工作时，您仍需要一种方法来标识要编辑的行。
希望这可以帮助。
好吧，我想出了一个不使用ID的解决方案：s，它不是最好的解决方案，对于下一个解决方案，我将使用JSON与我认为的整个对象。
如果你需要帮助你正在做的类似的事情，请看看这个文件：qazxsw poi
OBS：它不是相同的HTML（节省了一些时间），但想法是一样的。