Jquery創建元素並添加類

Question

您好我正在使用jquery ajax來創建elemenet。所有工作都正常，但數據混亂的位置。

這裏是它的外觀：

N3R3606O5 (radio button) 
2016-11-22 19:00:00 
2016-11-23 05:00:00 

何做我添加引導山坳MD類。

我希望它看起來像這樣：

#    Plate Number   Start Time    End Time 
(radio button) N3R3606O5    2016-11-22 19:00:00  2016-11-23 05:00:00 

，這裏是我的jQuery至今：

$('button[type="search"]').click(function(e) { 
$.ajax({ 
    url: "{{ route('accident.search') }}", 
    type: "POST", 
    data: { 
     '_token' : '{{csrf_token() }}', 
     'driver_id' : $('select[name="driver_id"]').val(), 
     'accident_date' : $('input[name="accident_date"]').val(), 
    }, 
    success: function(data) { 
     if(data.status == true) { 

     var result= $('#search-result'); 

     $.each(data.getCarbyDriver, function(i, data) { 
     PlateEle = $('<input/>').attr({ type: 'radio', name: 'car_id'}).val(data.car_id); 
        $("#search-result").html(data.plate_no); 
     StartEle = $('<div />').html(data.start_time); 
     EndEle = $('<div />').html(data.end_time); 
     }); 
     $('#search-result').append(PlateEle, StartEle, EndEle); 
     } 
    }, 
    error: function(data) { 

    } 
}); 
}); 

這是我的HTML表單至今：

<div class="row result-searh"> 
    <div class="col-xs-12 col-sm-12 col-md-12"> 
     <div id="search-result"></div> 
    </div> 
</div> 

Answer 1

嘗試做像這個使用表格，這是非常簡單的方法

$.ajax({ 
    url: "{{ route('accident.search') }}", 
    type: "POST", 
    data: { 
     '_token' : '{{csrf_token() }}', 
     'driver_id' : $('select[name="driver_id"]').val(), 
     'accident_date' : $('input[name="accident_date"]').val(), 
    }, 
    success: function(data) { 
     if(data.status == true) { 

      var table = '<table class="table table-bordered table-striped">'; 
      table += '<tr><th>#</th><th>Plate Number</th><th>Start Time</th><th>End Time</th></tr>'; 
      var values = data.getCarbyDriver;  
      for(var i=0; i<values.length; i++) 
      { 
      table += '<tr><td>values[i].car_id</td><td>values[i].plate_no</td><td>values[i].start_time</td><td>values[i].end_time</td></tr>'; 
      } 
      table += '</table>'; 
      $('#search-result').html(table); 
     } 
    }, 
    error: function(data) { 
    } 
}); 

Answer 2

您需要爲每一行製作4列。首先創建一個將顯示標題的行。 Here是一個jsfiddle它只是一個例子，但你想要的結構。

<div class="row" id="searchResult"> 
     <div class="row result-searh"> 
      <div class="col-xs-12 col-sm-12 col-md-12"> 
      <div class="col-xs-3 col-sm-3 col-md-3"> 
       <label>#</label> 
      </div> 
      <div class="col-xs-3 col-sm-3 col-md-3"> 
       <label>PalteNum</label> 
      </div> 
      <div class="col-xs-3 col-sm-3 col-md-3"> 
       <label>StartTime</label> 
      </div> 
      <div class="col-xs-3 col-sm-3 col-md-3"> 
       <label>EndTime</label> 
      </div> 
      </div> 
     </div> 
    </div> 

然後在你的JavaScript創建行，爲每個記錄具有相同的結構，並在div中分配值。

$('button[type="search"]').click(function(e) { 
    $.ajax({ 
     url: "{{ route('accident.search') }}", 
     type: "POST", 
     data: { 
      '_token' : '{{csrf_token() }}', 
      'driver_id' : $('select[name="driver_id"]').val(), 
      'accident_date' : $('input[name="accident_date"]').val(), 
     }, 
     success: function(data) { 
      if(data.status == true) { 

      var result= $('#search-result'); 

      $.each(data.getCarbyDriver, function(i, data) { 
      PlateEle = $('<input/>').attr({ type: 'radio', name: 'car_id'}).val(data.car_id); 
       PalteNum = data.plate_no; 
      StartEle = data.start_time; 
      EndEle = data.end_time; 
      var html = '<div class="row result-searh">'+ 
      '<div class="col-xs-12 col-sm-12 col-md-12">'+ 
      '<div class="col-xs-3 col-sm-3 col-md-3">'+ 
      PlateEle + 
      '</div>'+ 
      '<div class="col-xs-3 col-sm-3 col-md-3">'+ 
      '<label>'+PalteNum+'</label>'+ 
      '</div>'+ 
      '<div class="col-xs-3 col-sm-3 col-md-3">'+ 
      '<label>'+StartEle +'</label>'+ 
      '</div>'+ 
      '<div class="col-xs-3 col-sm-3 col-md-3">'+ 
      '<label>'+EndEle +'</label>'+ 
      '</div>'+ 
      '</div>'+ 
      '</div>'; 
      $("#searchResult").append(html); 
      }); 

      } 
     }, 
     error: function(data) { 

     } 
    }); 
    });