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>