JQuery 使用来自选定表行的数据填充表单字段

Posted 2023-05-09

【中文标题】JQuery 使用来自选定表行的数据填充表单字段

【英文标题】：JQuery populate form fields with data from a selected table row

【发布时间】：2012-09-14 14:49:12

【问题描述】：

我有一个简单的表格，每行末尾都有一个编辑按钮，如下所示：

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

我还必须能够从接下来的两行中获取值:(

【参考方案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();

【讨论】：

不敢相信我犯了这样一个简单的错误——另一个问题是获取接下来的两行。谢谢你:)

var td = $(this).closest('tr').next('tr').find('td');似乎得到了下一个表格行

是的，你是什么意思？你只想要点击发生的 tr 的值，而不是其他 tr 的值。

对不起 - 应该更清楚，但你已经帮助解决了整体问题。谢谢。

澄清一下，row1、row2、row3 中的值实际上包含一个表行的每个 CELL 的值。也许将它们命名为 cell1、cell 2、cell3 会更好。不过，谢谢你的回答！