如何在没有 id 的数据表中选择表单

Question

我用 html laravel 集合将这个表单写在一个表格中：

 @foreach($patients as $patient)
            <tr>
                {{Form::open(['route' => 'patientDetails'])}}
                {{Form::hidden('patient',json_encode($patient))}}
                {{Form::close()}}
                <td>{{$patient['display']}}</td>
                .......
                </td>
                </a>
            </tr>           
        @endforeach

        </tbody>
        <tfoot>

然后我编写了这个脚本部分，当用户点击表格的一行时，它可以让用户进入一个新页面，数据以隐藏形式呈现。

$(document).ready(function(e) {
    $('#patients').DataTable({
        responsive: true,
        fixedColumns:   true,
        columnDefs: [
            {
                targets: "_all",
                className: 'dt-body-center'
            }
        ]
    });
    var table = $('#patients').DataTable();
    $('#patients tbody').on('click', 'tr', function () {
        var data = table.row( this ).data();
        if (window.confirm( 'Stai per accedere ai dettagli di: '+data[0]+'' )) {
         //here I need a way to select the form inside the row just cliked
            console.log(data); //this do not contains the hidden form
        };});});

也许我混合了太多概念，并且有一种简单的方法可以实现相同的目标（单击此表的一行并通过 post 方法转到带有一些附加数据的下一页）但实际上我想找到一种方法通过 jquery 选择行内的表单，然后进行提交。

Answer 1

使用类，以便您更轻松地使用 jquery 选择器

<tbody>
    @foreach ($patients as $patient)
    <tr>
        <td>{{ $patient['display'] }}</td>
        <td>
            <form class="table-form" action="..." method="...">
                <input class="table-hidden" type="hidden" value='@json($patient)' name="patient">
                <button type="submit">View</button>
            </form>
        </td>
    </tr>
    @endforeach
</tbody>

$(() => {
    let table = $('#patients').DataTable({
        responsive: true,
        fixedColumns: true,
        columnDefs: [
            {
                targets: "_all",
                className: 'dt-body-center'
            }
        ]
    });

    $('.table-form').on('submit', e => {
        let patient = JSON.parse($(this).find('.table-hidden').val());

        if(window.confirm(`Stai per accedere ai dettagli di: ${patient[0]}`) {
            // console.log(patient);
        } else {
            e.preventDefault();
        }
    });
});

Answer 2

因此，在此示例中，有两行，每行在其第一个 TD 中都有一个表单。您所要做的就是将处理程序附加到每个 TR 并使用 jQuery 的选择器在该 TR 中查找表单。最后你只需调用submit就可以了。

我希望这个想法对你有所帮助。

$(document).ready(function(e) {
    const table = $('#patients').DataTable({
        responsive: true,
        fixedColumns:   true,
        columnDefs: [
            {
                targets: "_all",
                className: 'dt-body-center'
            }
        ]
    });
    
    table.on('click', 'tr', function () {
        const form = $(this).find('form').first();
        if (window.confirm( 'Stai per accedere ai dettagli di: '+form.attr('action')+'' )){
         //here I need a way to select the form inside the row just cliked
          //  console.log(data); //this do not contains the hidden form
        
          form.submit()
        };
    });
        
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" rel="stylesheet"/>

<table id="patients" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Form</th>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
        <tr>
                <td>
                <form method='get' action='https://google.com'>
                  
                  <input type='submit' value='GOOGLE'/>
                </form>
                </td>

                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
            <td>
                <form method='get' action='https://wikipedia.com'>
                  <input type='submit' value='WIKIPEDIA'/>
                </form>
                </td>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
          </tbody>
           </table>