Question

我有此表列出用户名和电子邮件：

<table>
    <tr>
        <th>Users</th>      
    </tr>
    <tr class="altrow">
        <td>admin &nbsp; <div style="visibility: hidden">admin@email.com</div></td>
    </tr>
    <tr>
        <td> User1 &nbsp;<div style="visibility: hidden">user1@email.com</div></td>
    </tr>
    <tr class="altrow">
        <td>User 2&nbsp;<div style="visibility: hidden">user2@email.com </div></td>
    </tr>
</table>

首先，我不确定这是一个很好的做法来公开一个设置隐藏可见性的电子邮件，但在这种情况下安全性不是问题。

主要问题是，一旦点击了用户名或旁边的复选框，我就会将电子邮件地址列在下面的框中：

<input name="data[To]" type="text" id="To"/>

我真的很感谢你的帮助！

Answer 1

以下内容将与您当前的标记一起使用（尽管为您的表格选择它可能更好）：

$(document).ready(function() {
    $("table td").click(function() {
        $("#To").val( $(this).find("div").text() );
    });
});

也就是说，点击任意td后，找到其中的div并将其内容放入input。当然，这假定每个td只包含一个div。

演示：http://jsfiddle.net/hUXx4/

我更倾向于将数据存储在html5风格的data-属性中，例如：

<td data-email="admin@email.com">admin</td>

...在这种情况下你会像这样使用它：

$("#To").val( $(this).attr("data-email") );
// OR
$("#To").val( $(this).data("email") );

Answer 2

作为对@nnnnnn答案的补充说明，如果你使用它会更好：

<td data-email="admin@email.com">

然后你可以使用jQuery的data方法，使你的代码看起来像这样：

$(document).ready(function() {
    $("table td").click(function() {
        $("#To").val($(this).data("email"));
    });
});

如何将数据从表传递到输入框？

2 个答案: