JavaScript動態向表格新增資料

DreamWeaver_Zhou發表於2018-02-06
<script>
    $(document).ready(function() {
        $("#search-form").submit(function(event) {
            //stop submit the form, we will post it manually.
             event.preventDefault();
            fire_ajax_submit();
        });    
    });
    function fire_ajax_submit() {
        /* $("#btn-search").attr("disabled","true"); */
        var search = JSON.stringify({
            /* KeyWord : $("#KeyWord").val(), */    
            /*  Page : 3 */
        
        });
        
        $.ajax({
            type : "GET",
            /* contentType : "application/json",//傳送資料為json格式 */
            url : "/resume/queryList",
            /* data : search, */
            dataType : 'json',
            cache : false,
            timeout : 600000,
            success : function(data) {
                
                /* console.log("SUCCESS : ", data); */
                 for(var index in data){
                    var gender=data[index].gender;
                    var age=data[index].age;
                    var education_bachelor=data[index].education_bachelor;
                    var year_experience=data[index].year_experience;
                    var web_id=data[index].web_id;    
                    var url=data[index].url;
                    var work=data[index].work;
                    var update_time=data[index].update_time;
                    var resume_from=data[index].resume_from;
                    var location=data[index].location;
                    var blank="_blank";
                    var html="<tr>";
                        html+="<th>"+gender+"</th>";
                        html+="<th>"+age+"</th>";
                        html+="<th>"+education_bachelor+"</th>";
                            html+="<th>"+work+"</th>";
                            html+="<th>"+year_experience+"</th>";
                            html+="<th>"+web_id+"</th>";
                            html+="<th>"+resume_from+"</th>";
                            html+="<th>"+update_time+"</th>";
                            html+="<td><a href="+location+" target="+blank+">檢視簡歷</a></td>";
                            html+="</tr>"
                    $('#mytab').append(html);
                }
                
                
                /* var json = "<h4>Ajax Response</h4><pre>"
                        + JSON.stringify(data, null, 5) +                 
                  "</pre>";        
                $('#feedback').html(json);  在頁面上列印獲取到的json */
                
            },
    
            error : function(e) {
                var json = "<h4>Ajax Response</h4><pre>" + e.responseText
                        + "</pre>";
                $('#feedback').html(json);
                console.log("ERROR : ", e);
            }
        });
    }
    $("#btn-search").removeAttr("disabled");

   

以下是表格,表格樣式是bootstrop

<table class="table table-hover" id="mytab">
 
  <tr  align="center">
      <th>性別</th>
      <th>年齡</th>
      <th>教育經歷</th>
      <th>工作經歷</th>    
      <th>工作年限</th>
      <th>WEB_ID</th>
      <th>來自哪裡</th>
      <th>更新時間</th>
      <td>下載</td>
  </tr>
 
  </table>


相關文章