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

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。 使用它可以根据需要进行转换。

Answer 2

您可以使用div的id等于迭代次数，并将该迭代次数作为参数发送给myFunction并使用它来更改其样式。

您的代码将如下所示：

<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>

更新：

我已经将名为panel的class添加到div中。 现在，您可以使用类名添加CSS。

CSS：

<style>
     .panel {
     display: none;
     }

</style>

Answer 3

您可以使用以下选项使内容可编辑。

和

onchange事件，您可以更新或显示/隐藏内容。

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