要素を作成し、クラスを追加する

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) { 

     } 
    }); 
    });