Jquery模态保持前一个值

时间:2015-10-10 18:45:40

标签: javascript jquery

我正在使用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">&times;</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;)但是没有工作的人请求帮助。

2 个答案:

答案 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();
});