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

Question

我试图在用户单击表格中的图像图标时显示一个 div 部分，但我在此处遇到了 javascript 代码问题，如果我单击第二行的图标，我可以在第一行中获取 div 部分，但不能在其他行中获取我仍然可以在第一行中获得 div 部分，它会告诉我如何在用户单击图像图标时单独显示 div 部分对不起，解释太长，请给我解决它的提示提前谢谢... 

html部分：

<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部分：

        <style>

                #panel {

                display: none;

                }

                </style>

        <script>

    function myFunction() {

        document.getElementById("panel").style.display = "block";

        console.log("hi")

    }

    <script>

Answer 1

如果 div 部分是指用户单击的 TR 内的所有 TD，则您需要获取单击的 TD 的 parentNode。使用它，您可以根据需要对其进行转换。