如何使每个单元格在 jquery 数据表中单击按钮时可编辑答案

【问题标题】：How to make each cell editable on a button click in jquery data table如何使每个单元格在 jquery 数据表中单击按钮时可编辑
【发布时间】：2017-10-15 09:09:54
【问题描述】：

我正在使用 jquery 数据表。每行都有一个按钮。现在，当我单击该行的那个按钮时，我想让该行的每个单元格都可编辑。

【问题讨论】：

到目前为止你尝试了什么？
每行添加按钮
提供minimal reproducible example
但您的问题要求 如何在 jquery 数据表中单击按钮时使每个单元格可编辑 而不是在每一行中添加按钮..顺便说一句，您需要单击按钮的事件并使用.closest('tr') 选择按钮的行和.each() 循环遍历要使其可编辑的元素
Google 将为您提供您需要的所有示例。

标签： javascript jquery datatables

【解决方案1】：

请查看以下示例代码。

<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
    $('#requestTable tr').hover(function () {
        $(this).addClass('hover');
    }, function () {
        $(this).removeClass('hover');
    });

    $(document).ready(function () {
        $("#requestTable tr td").click(function () {
            alert("Make This td editable :" + jQuery(this).closest('tr').find('.txt').text());

        });
    });
</script>
 </head>
<body>
<form>
    <div>
        <table class="table" id="requestTable">
            <thead class="text-primary">
                <th>Column</th>
                <th>Button</th>

            </thead>
            <tbody>
                <tr class="row">
                    <td class="txt">@item.interfacename</td>
                    <td>Button 1</td>
                </tr>
                  <tr class="row">

                    <td class="txt">@item.interfacename 1</td>
                      <td>Button 2</td>
                </tr>
                  <tr class="row">

                    <td class="txt">@item.interfacename 2</td>
                      <td>Button 3</td>
                </tr>
            </tbody>
        </table>
    </div>
</form>
</body>
<html>

在上面的示例代码中，我显示了 td 的警报，它放置在单击按钮的行中。因此，您可以根据需要自定义此代码。

希望对你有帮助。

【讨论】：