如何通过单击按钮来编辑表格中的单元格

Question

Hi i am trying to display the one div portion when user click the image icon in a table but i have facing a problem with javascript code here i can get the div portion in the first row only not in other if i clicked icon from second row still i can get the div portion in the first row it self tell me how to display the div portion individually when user click on image icon sorry for long explanation , give me the tips for resolve it Thanks in Advance... current output

Html part:

<table  class="table" id="tab_logic">

            <tr>
                <th>SNO</th>
                <th>Task</th>
                <th>Comments</th>
                <th>Edit</th>
            </tr>
            <% for(var i=0; i < status_info.length; i++) { %>

                <tr>
                <td><%= i+1 %></td> 
                <td><%= status_info[i].Task_Name %></td>
                <td id="new_edit"><%- status_info[i].Cmnt_Details %>
                    <div id="panel">//here i am hideing this div when user click on the image this will be display in specific cell
                        <form action="/StatusData" method="POST">
                            <p id="demo"></p>
                <textarea placeholder="write something..." id="aa" name="aa"></textarea></form>
                </div>  
                </td>
                <td><input type="image" src="/Images/edit.png" alt="button" style="width: 20px" onclick="myFunction()"></td>
                </tr>
            <% } %>
        </table>

Js part:

        <style>
                #panel {
                display: none;
                }

                </style>
        <script>
    function myFunction() {
        document.getElementById("panel").style.display = "block";
        console.log("hi")
    }


    <script>

Answer 1

If by div portion you mean al the TD's inside the TR where the user clicked you need to get the parentNode of the clicked TD. Using that you can transform it however you want.

Answer 2

You can use id of the div equals to the iteration number and send this iteration number to the myFunction as an argument and use it to change its style.

Your code will look like this:

<table  class="table" id="tab_logic">

        <tr>
            <th>SNO</th>
            <th>Task</th>
            <th>Comments</th>
            <th>Edit</th>
        </tr>
        <% for(var i=0; i < status_info.length; i++) { %>

            <tr>
            <td><%= i+1 %></td> 
            <td><%= status_info[i].Task_Name %></td>
            <td id="new_edit"><%- status_info[i].Cmnt_Details %>
                <div id='<%= i %>' class="panel">//here i am hideing this div when user click on the image this will be display in specific cell
                    <form action="/StatusData" method="POST">
                        <p id="demo"></p>
            <textarea placeholder="write something..." id="aa" name="aa"></textarea></form>
            </div>  
            </td>
            <td><input type="image" src="/Images/edit.png" alt="button" style="width: 20px" onclick="myFunction(<%= i %>)"></td>
            </tr>
        <% } %>
    </table>

Javascript:

<script>
function myFunction(divId) {
    document.getElementById(divId).style.display = "block";
    console.log("hi")
}
<script>

Update:

I have added class named panel to the div. You can now add css using class name.

CSS:

<style>
     .panel {
     display: none;
     }

</style>

Answer 3

You can make content editable with below options.

and

onchange event you can update or show/hide the contents.

<div contenteditable="true">
  This text can be edited by the user.
</div>