点击表格单元格显示下拉菜单并更新单元格内容
本文将解决一个常见的网页开发问题：如何点击表格单元格，使其转换为下拉菜单，并在用户选择后将所选内容更新到单元格中，同时避免失去焦点后内容失效的问题。
代码中存在以下几个问题：
id重复: 代码中所有第一列的单元格都使用了相同的id “showing”，这会导致javascript无法正确识别哪个单元格被点击。 id必须是唯一的。获取id的方法错误: $(“#showing”).parent().parent().find(“.line”).attr(‘id’).replace(/[^0-9]/gi, “”) 这段代码试图获取行元素的id，但方法过于复杂且容易出错。 更好的方法是直接从被点击的单元格的父元素（）获取id。下拉框内容更新: 选择下拉框后，代码只显示了”选项一”，这是因为$(obj).parent().text(value) 将选择的文本直接赋值给了单元格，而不是将选择的选项的值或文本插入到单元格中。
为了解决这些问题，我们需要修改代码如下：
首先，去除重复的id属性，并修改为更合理的结构。例如，可以为每一行添加一个唯一的类名和数据属性，用来存储行id。
| 列1 | 列2 |
|---|---|
| 一行文本1 | 一行文本2 |
| 二行文本1 | 二行文本2 |
然后，修改javascript代码，利用事件委托机制，动态创建下拉框并更新单元格内容：
$('#myTable').on('click', 'td[data-column="1"]', function() { let $td = $(this); let rowId = $td.closest('tr').data('id'); let currentValue = $td.text(); let selectHtml = ''; selectHtml += '选项一'; selectHtml += '选项二'; selectHtml += '选项三'; selectHtml += '选项四'; selectHtml += ''; $td.html(selectHtml); $('.my-select').val(currentValue); // 如果有初始值，设置初始值 $('.my-select').width($td.width()); // 设置下拉框宽度});$('#myTable').on('change', '.my-select', function() { let $select = $(this); let rowId = $select.data('row-id'); let selectedValue = $select.val(); let selectedText = $select.find(':selected').text(); // 更新单元格内容 $select.closest('td').text(selectedText); // 发送Ajax请求 (记得替换成你的实际URL和数据) $.ajax({ type: 'POST', url: '/http/xx.php', data: { "userId": rowId, "Sex": selectedValue }, dataType: "json", async: true, success: function(response) { // 处理Ajax响应 }, error: function(error) { // 处理Ajax错误 } });});
这段修改后的代码使用了事件委托，避免了为每个单元格添加单独的点击事件处理程序，提高了效率。它也正确地获取了行id，并使用change事件处理下拉框的选择，最终将选择的文本更新到单元格中，并发送ajax请求。 请记住替换/http/xx.php 为你的实际后台处理url。 同时，添加必要的错误处理机制，以提高代码的健壮性。
以上就是如何实现点击表格单元格显示下拉菜单并更新单元格内容？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1254745.html
微信扫一扫 
支付宝扫一扫 
