編輯時如何顯示“ display：none”表格

Question

我正在使用相同的表單進行創建和編輯。 大多數都是display: none 。 這是流程，輸入日期和單擊搜索按鈕的方式。 它將返回數據並顯示隱藏的表單。 到目前為止的代碼如下：

 $('button[type="search"]').click(function() { $(".row-bot, .row-info, .table-bordered").show(); }); $('button[type="search"]').click(function(e) { $.ajax( { url: "{{ route('fine.search') }}", type: "POST", data: { '_token': '{{csrf_token() }}', 'driver_id': $('select[name="driver_id"]').val(), 'fine_date': $('input[name="fine_date"]').val(), }, success: function(data) { if (data.status == true) { var result = []; $.each(data.getCarbyDriver, function(i, data) { HideEle = $('<input>').attr( { type: 'hidden', name: 'fleet_id' }).val(data.id); CarEle = $('<input/>', { "class": 'col-xs-3 col-sm-3 col-md-3', }).attr( { type: 'radio', name: 'car_id' }).val(data.car_id); PlateEle = $("<div/>", { "class": 'col-xs-3 col-sm-3 col-md-3', }).html(data.plate_no); StartELe = $("<div/>", { "class": 'col-xs-3 col-sm-3 col-md-3', }).html(data.start_time); EndEle = $("<div/>", { "class": 'col-xs-3 col-sm-3 col-md-3', }).html(data.end_time) }); $('#search-result').empty().append(CarEle, PlateEle, StartELe, EndEle, HideEle); $('#noData').hide(); $('#search-result').show() } }, error: function(data) { if (data.getCarbyDriver == null) { // if the result is null $('#noData').show(); $(".row-bot, #search-result, .table-bordered").hide(); // show the div.. } } }); }); 

 <div class="row top"> <div class="col-xs-4 col-sm-4 col-md-4"> <div class="form-group"> <label class="control-label">Driver Name:</label> {!! Form::select('driver_id', $driver, null, array('class' =&gt; 'form-control')) !!} </div> </div> <div class="col-xs-4 col-sm-4 col-md-4"> <div class="form-group"> <label>Fine Date:</label> {!! Form::text('fine_date', null, array('id' =&gt; 'datetimepicker', 'class' =&gt; 'form-control')) !!} </div> </div> <div class="col-xs-4 col-sm-4 col-md-4"> <div class="form-group filter-btn"> <button class='btn btn-info' type='search'>Search</button> </div> </div> </div> <div class="row-info"></div> <table class="table table-bordered" style="display: none"> <tr> <td class="col-xs-3 col-sm-3 col-md-3" style="text-align: center;"> <label>End Time</label> <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>Plate Number</label> </div> <div class="col-xs-3 col-sm-3 col-md-3"> <label>Start Time</label> </div> <div id="search-result"></div> </td> </tr> </table> <div class="col-xs-12 col-sm-12 col-md-12" id="noData" style="display: none; text-align: center;"> No data to display </div> <div class="row-bot" style="display: none;"> <div class="col-xs-6 col-sm-6 col-md-6"> <div class="form-group"> <label>Reference No:</label> {!! Form::text('reference_no', null, array('class' =&gt; 'form-control')) !!} </div> <div class="form-group"> <label class="control-label">Type:</label> {!! Form::select('type', $FineTypeList, null, array('class' =&gt; 'form-control')) !!} </div> </div> </div> <div class="col-xs-12 col-sm-12 col-md-12"> <button class="btn btn-primary" type="submit">Submit</button> </div> 

一切正常，但是當我嘗試編輯時，我希望它顯示所有表單而無需單擊搜索按鈕。 有任何想法嗎？

Answer 1

我沒有看到任何編輯器函數可以掛接到與所述函數相關的任何事件中，所以我只是添加了一個按鈕和一個jQ來顯示所有形式（至少是OP提供的任何形式）：

<button class="btn btn info">Edit</button>

$(".btn-info").on('click', function() {
$('.top').show();
 // editor functions...
});

 $('button[type="search"]').click(function() { $(".row-bot, .row-info, .table-bordered").show(); }); $('button[type="search"]').click(function(e) { $.ajax({ url: "{{ route('fine.search') }}", type: "POST", data: { '_token': '{{csrf_token() }}', 'driver_id': $('select[name="driver_id"]').val(), 'fine_date': $('input[name="fine_date"]').val(), }, success: function(data) { if (data.status == true) { var result = []; $.each(data.getCarbyDriver, function(i, data) { HideEle = $('<input>').attr({ type: 'hidden', name: 'fleet_id' }).val(data.id); CarEle = $('<input/>', { "class": 'col-xs-3 col-sm-3 col-md-3', }).attr({ type: 'radio', name: 'car_id' }).val(data.car_id); PlateEle = $("<div/>", { "class": 'col-xs-3 col-sm-3 col-md-3', }).html(data.plate_no); StartELe = $("<div/>", { "class": 'col-xs-3 col-sm-3 col-md-3', }).html(data.start_time); EndEle = $("<div/>", { "class": 'col-xs-3 col-sm-3 col-md-3', }).html(data.end_time) }); $('#search-result').empty().append(CarEle, PlateEle, StartELe, EndEle, HideEle); $('#noData').hide(); $('#search-result').show() } }, error: function(data) { if (data.getCarbyDriver == null) { // if the result is null $('#noData').show(); $(".row-bot, #search-result, .table-bordered").hide(); // show the div.. } } }); }); $(".btn-info").on('click', function() { $('.top').show(); // editor functions... }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row top"> <div class="col-xs-4 col-sm-4 col-md-4"> <div class="form-group"> <label class="control-label">Driver Name:</label> {!! Form::select('driver_id', $driver, null, array('class' => 'form-control')) !!} </div> </div> <div class="col-xs-4 col-sm-4 col-md-4"> <div class="form-group"> <label>Fine Date:</label> {!! Form::text('fine_date', null, array('id' => 'datetimepicker', 'class' => 'form-control')) !!} </div> </div> <div class="col-xs-4 col-sm-4 col-md-4"> <div class="form-group filter-btn"> <button class='btn btn-info' type='search'>Search</button> </div> </div> </div> <table class="table table-bordered" style="display: none"> <div class="row-info"> <td class="col-xs-3 col-sm-3 col-md-3" style="text-align: center;"> <label>End Time</label> </div> <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>Plate Number</label> </div> <div class="col-xs-3 col-sm-3 col-md-3"> <label>Start Time</label> </div> <div id="search-result"></div> </div> </table> <div id="noData" class="col-xs-12 col-sm-12 col-md-12" style="display: none; text-align: center;">No data to display</div> <div class="row-bot" style="display: none;"> <div class="col-xs-6 col-sm-6 col-md-6"> <div class="form-group"> <label>Reference No:</label> {!! Form::text('reference_no', null, array('class' => 'form-control')) !!} </div> <div class="form-group"> <label class="control-label">Type:</label> {!! Form::select('type', $FineTypeList, null, array('class' => 'form-control')) !!} </div> </div> </div> <div class="col-xs-12 col-sm-12 col-md-12"> <button type="submit" class="btn btn-primary">Submit</button> </div> <button class="btn btn info">Edit</button>