我想，如果我按一下按鈕今天則涉及到當今回圈將被顯示，如果按鈕一個月，然后單擊顯示的應該是一個月foreach回圈。
這是我的控制器：
public function render()
{
$this->today=Order_Detail::whereDate('created_at', Carbon::today())->get();
$this->todaySale=Order_Detail::whereDate('created_at', Carbon::today())->sum('amount');
$this->month=Order_Detail::whereMonth('created_at', date('m'))->get();
$this->montlySale=Order_Detail::whereMonth('created_at', date('m'))->sum('amount');
return view('livewire.order');
}
這是我的 order.blade.php 代碼：
<!-- Today -->
<div class="col-lg-12">
<div class="row">
<div class="col-md-9">
<div class="card">
<div class="card-header"><h4 style="float:left">Recent Orders</h4>
</div>
<div class="card-body">
<Table class="table table-bordered table-left">
<div style="float:right">
<button type="button" onclick="" id="today" >Today</button>
<button type="button" onclick="" id="today" >Month</button>
</div>
<tbody>
<thead>
<tr>
<th>Product id</th>
<th>Order Id</th>
<th>Product Name</th>
<th>Quantity</th>
<th>Price</th>
<th>Total Amount</th>
<th>Discount</th>
<th>Date and Time</th>
</tr>
</thead>
<div id="todayTag">
<label for="">Total Sale Today {{$todaySale}}</label>
@foreach($today as $today)
<tr>
<td>{{$today->product_id}}</td>
<td>{{$today->order_id}}</td>
<td>{{$today->product->product_name}}</td>
<td>{{$today->quantity}}</td>
<td>{{$today->unitprice}}</td>
<td>{{$today->amount}}</td>
<td>{{$today->discount}}</td>
<td>{{$today->created_at}}</td>
<td></td>
</tr>
@endforeach
</div>
<div id="monthTag">
<label for="">Total Sale by Month {{$montlySale}}</label>
@foreach($month as $month)
<tr>
<td>{{$month->product_id}}</td>
<td>{{$month->order_id}}</td>
<td>{{$month->product->product_name}}</td>
<td>{{$month->quantity}}</td>
<td>{{$month->unitprice}}</td>
<td>{{$month->amount}}</td>
<td>{{$month->discount}}</td>
<td>{{$month->created_at}}</td>
<td></td>
</tr>
@endforeach
<div>
<tbody>
</Table>
</div>
</div>
</div>
</div>
</div>
請建議一種將我的回圈放在我的按鈕內的方法？通過 livewire、javascript 或任何？我已經搜索了很多，但無法做到。
uj5u.com熱心網友回復：
假設默認情況下沒有顯示表格，并且您必須先單擊一個按鈕才能顯示一個按鈕，我建議您從表格中洗掉Today和Month按鈕并將其放在card-bodydiv 之后和表格之前，如下所示：
<div class="card-body">
<button type="button" onclick="document.getElementById('todayTable').style.display ='block'; document.getElementById('monthTable').style.display ='none';" id="today">Today</button>
<button type="button" onclick="document.getElementById('todayTable').style.display ='none'; document.getElementById('monthTable').style.display ='block';" id="month">Month</button>
<table class="table table-bordered table-left">
至于你的表，你可以這樣做：
// Today Table
<table class="table table-bordered table-left" id="todayTable" style="display: none;">
<tbody>
<thead>
<tr>
<th>Product id</th>
<th>Order Id</th>
<th>Product Name</th>
<th>Quantity</th>
<th>Price</th>
<th>Total Amount</th>
<th>Discount</th>
<th>Date and Time</th>
</tr>
</thead>
<label for="">Total Sale Today {{$todaySale}}</label>
@foreach($today as $today)
<tr>
<td>{{$today->product_id}}</td>
<td>{{$today->order_id}}</td>
<td>{{$today->product->product_name}}</td>
<td>{{$today->quantity}}</td>
<td>{{$today->unitprice}}</td>
<td>{{$today->amount}}</td>
<td>{{$today->discount}}</td>
<td>{{$today->created_at}}</td>
<td></td>
</tr>
@endforeach
</tbody>
</table>
// Month Table
<table class="table table-bordered table-left" id="monthTable" style="display: none;">
<tbody>
<thead>
<tr>
<th>Product id</th>
<th>Order Id</th>
<th>Product Name</th>
<th>Quantity</th>
<th>Price</th>
<th>Total Amount</th>
<th>Discount</th>
<th>Date and Time</th>
</tr>
</thead>
<label for="">Total Sale by Month {{$montlySale}}</label>
@foreach($month as $month)
<tr>
<td>{{$month->product_id}}</td>
<td>{{$month->order_id}}</td>
<td>{{$month->product->product_name}}</td>
<td>{{$month->quantity}}</td>
<td>{{$month->unitprice}}</td>
<td>{{$month->amount}}</td>
<td>{{$month->discount}}</td>
<td>{{$month->created_at}}</td>
<td></td>
</tr>
@endforeach
<div>
</tbody>
</table>
有了這個，表格根據點擊的按鈕顯示和隱藏。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/388664.html
標籤：javascript 拉拉维尔 按钮 点击 脚本