我正在使用jQuery模式动态显示一些表数据,现在的问题是,在每次迭代时,创建的数据都会附加到模态中,但是下次它保存上一行时,如何摆脱它我发布了我的代码
<div class="modal fade" id="event-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header-avaliability">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Avilable Interviews</h4>
</div>
<div class="modal-body">
<table class="myTable">
<tr>
<th width="10%">Company Name</th>
<th width="10%">Interviewer</th>
<th width="10%">Subject</th>
<th width="10%">Timing</th>
<th width="10%">Consultant Name </th>
<th width="10%">Candidate Name </th>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
javascript操作
jQuery.getJSON(url+"&date=" +date.format()+"&consultantID="+consultantID+"&teamName="+teamName+"&type="+type, function(data) {
var $formrow =0 ;
var arr =0;
var arr1 =0;
var arr2 =0 ;
var arr3 = 0;
for(var z=0; z<data.applicationArray.length;z++){
applicationArray = data.applicationArray[z].split("##%%$$");
arr = applicationArray.slice();
arr1 = arr[0].slice();
arr2 = arr[1].slice();
arr3 = arr[2].slice();
arr4 = arr[3].slice();
arr5 = arr[4].slice();
arr6 = arr[5].slice();
$formrow = '<tr><td>'+arr1+'</td><td>'+arr2+'</td><td>'+arr3+'</td><td>'+arr4+'</td><td>'+arr5+'</td><td>'+arr6+'</td></tr>';
$('.myTable').append($formrow);
}
$('#event-modal').modal('show');
});
模态保持前一个值,我正在使用$(&#39;#event-modal&#39;)。html(&#39;&#39;)但是没有工作的人请求帮助。
答案 0 :(得分:2)
jQuery.getJSON(url+"&date=" +date.format()+"&consultantID="+consultantID+"&teamName="+teamName+"&type="+type, function(data) {
var $formrow =0 ;
var arr =0;
var arr1 =0;
var arr2 =0 ;
var arr3 = 0;
$(".myTable").html('<tr> <th width="10%">Company Name</th> <th width="10%">Interviewer</th> <th width="10%">Subject</th> <th width="10%">Timing</th> <th width="10%">Consultant Name </th> <th width="10%">Candidate Name </th> </tr>');
for(var z=0; z<data.applicationArray.length;z++){
applicationArray = data.applicationArray[z].split("##%%$$");
arr = applicationArray.slice();
arr1 = arr[0].slice();
arr2 = arr[1].slice();
arr3 = arr[2].slice();
arr4 = arr[3].slice();
arr5 = arr[4].slice();
arr6 = arr[5].slice();
$formrow = '<tr><td>'+arr1+'</td><td>'+arr2+'</td><td>'+arr3+'</td><td>'+arr4+'</td><td>'+arr5+'</td><td>'+arr6+'</td></tr>';
$('.myTable').append($formrow);
}
$('#event-modal').modal('show');
});
这会奏效。添加$(".myTable").html('<tr> <th width="10%">Company Name</th> <th width="10%">Interviewer</th> <th width="10%">Subject</th> <th width="10%">Timing</th> <th width="10%">Consultant Name </th> <th width="10%">Candidate Name </th> </tr>');
以便.myTable
每次刷新。
答案 1 :(得分:0)
在.myTable
附加任何内容之前,请清空for loop
,如下所示:
jQuery.getJSON(url+"&date=" +date.format()+"&consultantID="+consultantID+"&teamName="+teamName+"&type="+type, function(data)
{
$('.myTable').empty();
//rest of code..
});
我通过查看其代码将其视为twitter-bootstrap modal
,我希望在elements
的关闭时清空modal
,如下所示
$('#event-modal').on('hidden.bs.modal',function(){
//fires everytime modal is closed by any sort of event
$('#event-modal .myTable').empty();
});