get td jstl value by javascript

Question

I want to get value of td and print it to textbox but td has jstl value so it get the first value in arraylist but I want to get the current value in td when user click it. Can anyone help me how can I do that?

  $(document).ready(function() {
  $("div.contacts table td").live('click', function() {
    document.getElementById("contactName").value=
         document.getElementById("contactId").innerHTML;
  });
});

input text and td

 <input type="text" id="contactName">

 <td id="contactId">{{contact.email}}</td>

Answer 1

You have to take the HTML of the clicked element, which is this :

$(document).ready(function() {
  $("div.contacts table td").live('click', function() {
     $("#contactName").val($(this).text());
  });
});

---

Note that the live() method is deprecated. You should use on instead.

---

Demo, using on :

 $(document).ready(function() { $("div.contacts").on('click', "table td", function() { $("#contactName").val($(this).text()); }); }); 

 td { cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" id="contactName"> <div class="contacts"> <table> <thead> <tr> <th>Name</th> </tr> </thead> <tbody> <tr> <td>Alice</td> </tr> <tr> <td>Bob</td> </tr> <tr> <td>Carol</td> </tr> </tbody> </table> </div> 

Answer 2

You're using your code in opposite way:

document.getElementById("contactName").value=
         document.getElementById("contactId").innerHTML;

Should be:

     document.getElementById("contactId").innerHTML=
         document.getElementById("contactName").value;