Question

我有一个动态生成的表，看起来像这样

<table width="100%">
    <tr>
        <th>Client ID</th>
        <th>Shortname</th>
        <th>Client Name</th>
        <th>Client Name 2</th>
    </tr>
@foreach($clients as $client)
    <tr>
        <td>{{$client->customer_id}}</td>
        <td>{{$client->shortname}}</td>
        <td>{{$client->customer}}</td>
        <td>{{$client->customer_row2}}</td>
    </tr>
@endforeach

我希望能够点击一行，并自动使用表格行中的信息填充表单。

我想到了一个我认为应该有效的解决方案，但我还没有真正掌握编写代码的JS技能。这就是我的想法：

{{$row=1}}
<table width="100%">
        <tr>
            <th>Client ID</th>
            <th>Shortname</th>
            <th>Client Name</th>
            <th>Client Name 2</th>
        </tr>
    @foreach($clients as $client)
        <tr id="row{{$num}}">
            <td class="clientId">{{$client->customer_id}}</td>
            <td class="shortname">{{$client->shortname}}</td>
            <td class="client">{{$client->customer}}</td>
            <td class="clientRow2">{{$client->customer_row2}}</td>
        </tr>
    {{$row++}}
    @endforeach

这里有一些伪代码可以帮助你理解我的想法：

onclick getElementById(.this)
input element with id clientId .put(this.#clientId)
input element with id shortname .put(this.#shortname)
input element with id client .put(this.#client)
input element with id clientRow2 .put(this.#clientRow2)

我希望每个人都能理解我想要完成的事情，并且有人愿意帮助

问候约翰

Answer 1

我最终这样做了：

<tr onclick="var td = $(this).find('td');
var row1 = td.eq(0).html();
var row2 = td.eq(1).html();
var row3 = td.eq(2).html();
var row4 = td.eq(3).html();
$('.input1').val(row1);
$('.input2').val(row2);
$('.input3').val(row3);
$('.input4').val(row4);">

在每个表格行上，不是很优雅，但它完成了工作

使用javascript / jquery单击表行时自动填写表单

1 个答案: