2

Need help with populating a text area based on html table row selection.

In the table below, I want to extract the content of the column 'Comments' for the selected row and write into the text area 'Comment' on the same page. I have only managed to create the table but nothing else.

enter image description here

Below is the code I have now created from this link. What is happening now is that only the currently selected cell gets put in the text box instead of just the 'Comment' column. I want to input only in the 'Comment' column into the box regardless of the cell clicked upon in the row.

<table id="table">
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Comments</th>
        </tr>
   <tbody>
        <tr>
            <td>John</td>
            <td>42</td>
            <td>avery long comment</td>
        </tr>
        <tr>
            <td>Peter</td>
            <td>35</td>
            <td>another very long comment</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>54</td>
            <td>some comment</td>
        </tr>
   </tbody>
</table>


<script>
   var table = document.getElementById('table');
   var selected = table.getElementsByClassName('selected');
   table.onclick = highlight;

   function highlight(e) {
    if (selected[0]) selected[0].className = '';
    e.target.parentNode.className = 'selected';
   
    var element = document.querySelectorAll('.selected');
    if (element[0] !== undefined) { //it must be selected
        document.getElementById("myTextbox").value = element[0].children[0].firstChild.data
    }        
   }
</script>


<div >
    <textarea class="form-control" id="myTextbox"></textarea>  
</div> 

Thanks for your help.

1 Answer 1

0

You're getting the first column but you can get the third column with the comment by changing the index of the child to 2 instead of 0.

document.getElementById("myTextbox").value = element[0].children[2].firstChild.data
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.