Copying values from a table row to a modal - php

Question

I have wrote an HTML table presenting users' information from an SQL database.
<table class="table table-hover">
<tr>
<th>Username</th>
<th>Password</th>
<th>Role</th>>
<th>Attribute</th>
</th>
<th>Ideas/Score</th>
<th>Edit</th>
<th>Delete</th>
</tr>
<?php while($result=m ysqli_fetch_array($fetch)) { $usertoattrquery="SELECT * FROM usertoattr WHERE usertoattr.user_id=" .$result[user_id]; $attrfetch=mysqli_query($con,$usertoattrquery) or die ( 'could no connect with instructions'); echo "<tr><td>".$result[ "username"]. "</td><td>" .$result[ "password"]. "</td>
<td>" .$result[ "role"]. "</td><td>only for Eval</td><td>coming soon</td><td>
<a href='#editUser' role='button' class='btn' data-toggle='modal'>Edit</a> </td>
<td><button class='btn'onclick='deleteConfirm()'>Delete</button> </td></tr>"; } ?>
</table>
I would like when someone pushes the button "Edit" in a specific row a Modal to be opened and the values from this table row to be copied (for example name and password) inside the modal.
<div id="editUser" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<h3 id="myModalLabel">Edit User</h3>
User Name
<input type="text">
<br>User Password
<input type="text">
<br>User Role
<select>
<option>Evaluator</option>
<option>Observer</option>
</select>
<br>User Attribute
<select multiple>
<option>Economics</option>
<option>Software</option>
<option>Management</option>
</select>
<br>
<button class='btn btn-primary'>OK</button>
<button class='btn' data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
How is that possible?

Answer 1

You could possibly add an id to each of your <td> (just make sure each one is different multiple id's are bad!!)
Then have your javascript use that value (.innerHTML) to set the value of your input text inside your modal.