Question

您好我使用jquery ajax创建elemenet。一切正常，但数据的位置混乱。

这里看起来如何：

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

我可以添加bootstrap col md class。

我希望它看起来像这样：

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

        } 
    });  
    });

Jquery创建元素并添加类

2 个答案: