JQuery使用來自選定表行的數據填充表單字段

Question

我有一個簡單的表格，每行末尾有一個編輯按鈕，如下所示：

<table class='document_table'>
<tr>
    <td>Item1</td>
    <td>Item2</td>
    <td>Item3</td>
    <td><a href='javascript:void(0);' class='edit_doc'>Edit</a></td>
</tr>
<tr>
    <td colspan='4'>Item4</td>
</tr>
<tr>
    <td colspan='4'>Item5</td>
</tr>
<tr>
    <td>Item1</td>
    <td>Item2</td>
    <td>Item3</td>
    <td><a href='javascript:void(0);' class='edit_doc'>Edit</a></td>
</tr>
<tr>
    <td colspan='4'>Item4</td>
</tr>
<tr>
    <td colspan='4'>Item5</td>
</tr>
</table>

我需要做的是當單擊編輯按鈕時，使用三行中的數據填充表單。 請注意，行數是動態的。

表格html如下：

 <label>Input 1<label>
 <input type='text' class='input1' />
 <label>Input 2<label>
 <input type='text' class='input2' />
 <label>Input 3<label>
 <input type='text' class='input3' />...etc

到目前為止，我的jQuery如下，但沒有工作....

var row1=$(this).closest('tr').find('td').eq(0).val();
$('.input1').val(row1);

我還必須能夠從接下來的兩行中獲取值:(

Answer 1

您應該使用.html()而不是.val() ，如下所示：

var row1=$(this).closest('tr').find('td').eq(0).html();

要獲取其他行，您可以執行以下操作：

var td = $(this).closest('tr').find('td');
var row1 = td.eq(0).html();
var row2 = td.eq(1).html();
var row3 = td.eq(2).html();