jquery - 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();