Question

我正在使用Laravel应用程序，其中有一些从后端生成的数据，并以表格的形式显示在视图上。在表上，我在tbody中进行了foreach循环，借此我将每一行与一个按钮一起显示，用户可以单击该按钮提交该特定行的数据。问题是当用户单击行上的每个按钮时，没有任何反应，但是当我更改表的html结构时，数据已提交，但表标题未对齐，此后销毁了用户界面

第一种布局，单击按钮后不提交任何内容

<table class="table table-hover mg-b-0 tx-11" id="policyTable">
<thead>
    <tr>
    <th>NAME</th>
    <th>INVOICE DATE</th>
    <th>VOUCHER NO.</th>
    <th>INVOICE AMOUNT</th>
    <th>KRA PIN</th>
    <th>STATUS</th>
    <th>PAYOUT</th>
    </tr>
</thead>
   <tbody>
    @foreach($medical as $lifeC)
    <form method="POST" action="{{ route('b2b.medPayout') }}" id="payoutRequest">
        <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">  
        <tr>
            <!-- Hidden input fields that am submitting of a form that am submitting-->
             <input type="hidden" name="agentName" id="agentName" value="{{ $lifeC->agent_name }}">
            <input type="hidden" name="voucherNo" id="voucherNo" value="{{ $lifeC->voucher_number }}">
            <input type="hidden" name="agentCode" id="agentCode" value="{{ $lifeC->agent_code }}">
            <input type="hidden" name="kraPin" id="kraPin" value="{{ $lifeC->kra_pin }}">
            <!--END-->
            <td class="add-color-dark">{{ $lifeC->agent_name }}</td>
            <td>{{ date( 'M j, Y', strtotime($lifeC->invoice_date)) }}</td>
            <td>{{ $lifeC->voucher_number }}</td>
            <td>{{ $lifeC->invoice_amount }}</td>
            <td>{{ $lifeC->kra_pin }}</td>
            <td>
                <span class="badge badge-danger">{{ $lifeC->payment_status }}</span>
            </td>
            <td>
                <button type="submit" class="btn btn-primary btn-sm" id="btnFront" style="cursor: pointer;"> Request </button>      
            </td>
        </tr>
    </form>     
    @endforeach
</tbody>
</table>

提交的第二种布局，但主题未对齐

 <table class="table table-hover mg-b-0 tx-14">
<thead>
<tr>
    <th>NAME</th>
    <th>INVOICE DATE</th>
    <th>VOUCHER NO.</th>
    <th>INVOICE AMOUNT</th>
    <th>KRA PIN</th>
    <th>STATUS</th>
    <th>PAYOUT</th>
</tr>
</thead>
</table>
<tbody>
        @foreach($medical as $lifeC)
        <!--Add the table insode the form-->
        <form method="POST" action="{{ route('b2b.medPayout') }}" id="payoutRequest">
          <table class="table table-hover mg-b-0 tx-11" id="policyTable">
            <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">  
            <tr>
                 <input type="hidden" name="agentName" id="agentName" value="{{ $lifeC->agent_name }}">
                <input type="hidden" name="voucherNo" id="voucherNo" value="{{ $lifeC->voucher_number }}">
                <input type="hidden" name="agentCode" id="agentCode" value="{{ $lifeC->agent_code }}">
                <input type="hidden" name="kraPin" id="kraPin" value="{{ $lifeC->kra_pin }}">

                <td class="add-color-dark">{{ $lifeC->agent_name }}</td>
                <td>{{ date( 'M j, Y', strtotime($lifeC->invoice_date)) }}</td>
                <td>{{ $lifeC->voucher_number }}</td>
                <td>{{ $lifeC->invoice_amount }}</td>
                <td>{{ $lifeC->kra_pin }}</td>
                <td>
                    <span class="badge badge-danger">{{ $lifeC->payment_status }}</span>
                </td>
                <td>
                    <button type="submit" class="btn btn-primary btn-sm" id="btnFront" style="cursor: pointer;"> Request </button>
                </td>
            </tr>
          </table>
        </form>     
        @endforeach
</tbody>

屏幕截图

Answer 1

我建议您重新创建布局并改用ajax。

在您当前的布局下，不仅您重复了太多input type hidden，而且<form>在每个循环中都重复了一次，并且都具有相同的id（甚至按钮，输入等）。

尝试根据按钮所在的行将按钮更改为可以传递数据的内容。

Answer 2

如果您想这样做，则需要使您的字段的ID唯一。我建议为每行动态设置一个唯一值，例如：

id="payoutRequest_$lifeC->agent_id"

对于每个具有ID的值。 ID应该始终是唯一的-这意味着对于循环的每次迭代，提交的按钮和数据对于该特定行都是唯一的。

在foreach循环中单击表上的单个按钮不起作用

2 个答案: