Question

I have this table listing user names and emails:

<table>
    <tr>
        <th>Users</th>      
    </tr>
    <tr class="altrow">
        <td>admin &nbsp; <div style="visibility: hidden">[e-mail]</div></td>
    </tr>
    <tr>
        <td> User1 &nbsp;<div style="visibility: hidden">[e-mail]</div></td>
    </tr>
    <tr class="altrow">
        <td>User 2&nbsp;<div style="visibility: hidden">[e-mail] </div></td>
    </tr>
</table>

First of all, I am not sure if this is a good practice to expose an email with setting visibility to hidden, but the security is not a concern in this case.

The main problem is that once clicked on a user name, or a check box next to it, I would liek the email address to appear in the following box:

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

I really appreciate your help here!

Answer 1

Something like the following will work with your current markup (though it would be nicer to give your table an id to select it with):

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

That is, on click on any td, find the div within it and put its content into the input. Of course this assumes each td will only contain a single div.

Demo: http://jsfiddle.net/hUXx4/

I would be more inclined to store the data in an html5-style data- attribute, e.g.:

<td data-email="[e-mail]">admin</td>

…in which case you’d use it like so:

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