how to get values of selection row in html table and show them in a input text using javasricpt?

Question

How can I click on an HTML row then show the selection values of the row in input text?

I've tried like this, but what shows up in the input text only the first row even though I click the second row and so on..

div class="col-md-1 col-md-1 col-xs-1"> 
    <button type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#myModal">...</button>    
       <!-- Modal -->
         <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" scrollY:380>
            <div class="modal-dialog" role="document">
               <div class="modal-content">
               <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                   <h4 class="modal-title" id="myModalLabel">Category</h4>
                         </div>
                            <div class="modal-body">
                              <table id="datatable-responsive" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
                                 <thead>
                                    <tr>
                                      <th>Id Event Category</th>
                                      <th>Event Category</th>
                                      <th>Description</th>
                                    </tr>
                                 </thead>
                                 <tbody>
                                    <% objLOV.forEach(function (lov) { %>
                                    <tr>
                                       <td id="field_id" onclick="myFunction()">                                                                                       
                                          <%= lov.id %>                                      
                                       </td>                                                                                  
                                       <td id="field_category" onclick="myFunction()">                                                                                       
                                          <%= lov.event_category %>                                                                                
                                       </td>                                                                                  
                                       <td id="field_description" onclick="myFunction()">                                                                                       
                                          <%= lov.description %>                                                                                
                                       </td>                                                                             
                                    </tr>
                                 <% }) %>
                              </tbody>
                              </table>

and my javascript

<script>
    function myFunction() {
        document.getElementById("id_type").value = document.getElementById("field_id").textContent.trim();
        document.getElementById("event_category").value = document.getElementById("field_category").textContent.trim();
        document.getElementById("description").value = document.getElementById("field_description").textContent.trim();
    }
</script>

"id_type" , "event_category" , "description" is my input text type id

Answer 1

Apply the click event for <tr> and pass the current reference this to the calling function like <tr onclick="callme(this)">. From the javascript get the current row reference and find all the td inside that. Now get the values using innerHTML and assign it to the respective input fields("id_type" , "event_category" , "description"). Look at the following example.

function callme(e)
{
  var tds=e.getElementsByTagName('td');
  document.getElementById("id_type").value = tds[0].innerHTML.trim();
  document.getElementById("event_category").value = tds[1].innerHTML.trim();
  document.getElementById("description").value = tds[2].innerHTML.trim();

}

<table>
<tr onclick="callme(this)">
  <td>test1</td>
  <td>something1</td>
  <td>content1</td>
</tr>
<tr onclick="callme(this)">
  <td>test2</td>
  <td>something2</td>
  <td>content2</td>
</tr>
<tr onclick="callme(this)">
  <td>test3</td>
  <td>something3</td>
  <td>content3</td>
</tr>
</table>

<input type="text" id="id_type" />
<input type="text" id="event_category" />
<input type="text" id="description" />

Note: As per my comment, don't use the same id for all your td. You can try to use class instead of td. For this current solution it is not affecting but in feature it will give you the wrong information as like your code. It is important id should be unique.

Answer 2

According to HTML spec id attribute should be unique in a page,

so if you have multiple elements with same id, your HTML is not valid.

getElementById() should only ever return one element. You can't make it return multiple elements.

So you can use unique id for each row or try using class