使用javascript / jquery單擊表格行時自動填寫表格

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);">

在每個表行上，雖然不是很優雅，但是可以完成工作