Passing values to javascript using $(this).closest(“tr”).find(“td:eq(0)”).text() , but ID is not included in the table

Question

Erm, just a student here, the question I'm about to ask is probably already asked somewhere, however, I just don't know what I'm looking for yet, please bear with me if this is already asked D: , Anyway,

-the data is from a table

-I used a js code that puts the information in a row of a table into a textbox for editing

-it is said that it is best practice to not show primary keys in a table

-I tried doing td style="visibility:hidden" or display:none but it messes up the table design and I don't know how to fix it (I tried)

-so yeah, the primary key is not included in the displayed rows and I need the primary key for the update query

-I am thinking about passing it into a input type="hidden" on the form but since the js needs the value to be on the row I need to include the primary key in the table, which I'm trying to avoid.

Is there any alternatives or something I can do. My experience in this is very limited so there are probably other alternatives to this problem but I cannot understand them so much yet.

 $(document).ready(function(){ $("#edit-button").click(function(){ var Firstname = $(this).closest("tr").find("td:eq(0)").text(); var Lastname = $(this).closest("tr").find("td:eq(1)").text(); $("#firstname-edit").val(Firstname); $("#lastname-edit").val(Lastname); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table border="1px"> <thead> <th>firstname</th> <th>lastname</th> <th>action</th> </thead> <tbody> <?php include "con.php"; $getinfo = mysqli_query($con, "SELECT * FROM usertable") while($res = mysqli_fetch_array($getinfo )) { $id = $res['id']; $fname = $res['fname']; $lname = $res['lname']; echo "<tr> <td>".$fname."</td> <td>".$lname."</td> <td><a href="#" id="edit-button">Edit</a></td> </tr>"; } ?> </tbody> </table> <form> <input type="text" id="firstname-edit" placeholder="firstname..."><br> <input type="text" id="lastname-edit" placeholder="lastname..."><br> <input type="submit" id="edit-save" name="submit" value="Save"> </form> 

Answer 1

I don't see why you should obscure the Primary ID, everybody who would be interested in messing with your database already knows that most tables are designed this way.

Also your edit button has the following id: edit-button , please make sure that whenever you are dealing with multiple results each elements has a unique id.

What your script will try to do now is select an element closest to the id; edit-button of which there may be 20.

You will be better off in selecting the .click event based on the class of the button.

Replace your button code with:

<td><a href="#" class="edit-button">Edit</a></td>

And replace the JavaScript line: $("#edit-button").click(function(){ with the following:

$(document).on('click','.edit-button',function() {

To ensure the script selects the appropriate closest FirstName and LastName.

Answer 2

The best place for any data you do not necessarily need to display, but which needed at some point, is in data-attributes . In your case you would change:

echo "<tr>

To:

echo "<tr data-id='" . $id . "'>

Then you can retrieve it in JS this way:

id = $(this).closest('tr').data('id');

@Julian Koster points out an important error in your code: ids have to be unique. So rather than use id="edit-button" and #edit-button please use class="edit-button" and .edit-button