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

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

类似以下的内容将适用于您当前的标记（尽管为您的表提供一个 id 来选择它会更好）：

$(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"));
    });
});