如何將數據從表傳遞到輸入框？

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的數據方法，使您的代碼如下所示：

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