如何使每个单元格在 jquery 数据表中单击按钮时可编辑
Posted
技术标签:
【中文标题】如何使每个单元格在 jquery 数据表中单击按钮时可编辑【英文标题】：How to make each cell editable on a button click in jquery data table 【发布时间】：2017-10-15 09:09:54 【问题描述】：我正在使用 jquery 数据表。每行都有一个按钮。现在，当我单击该行的那个按钮时，我想让该行的每个单元格都可编辑。
【问题讨论】：
到目前为止你尝试了什么？ 每行添加按钮 提供minimal reproducible example 但您的问题要求 如何在 jquery 数据表中单击按钮时使每个单元格可编辑 而不是在每一行中添加按钮..顺便说一句，您需要单击按钮的事件并使用.closest('tr') 选择按钮的行和.each() 循环遍历要使其可编辑的元素
Google 将为您提供您需要的所有示例。
【参考方案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 的警报，它放置在单击按钮的行中。因此，您可以根据需要自定义此代码。
希望对你有帮助。
【讨论】：
以上是关于如何使每个单元格在 jquery 数据表中单击按钮时可编辑的主要内容，如果未能解决你的问题，请参考以下文章