如何实现点击表格单元格显示下拉菜单并更新单元格内容？

点击表格单元格显示下拉菜单并更新单元格内容

本文将解决一个常见的网页开发问题：如何点击表格单元格，使其转换为下拉菜单，并在用户选择后将所选内容更新到单元格中，同时避免失去焦点后内容失效的问题。

代码中存在以下几个问题：

1. id重复: 代码中所有第一列的单元格都使用了相同的id "showing"，这会导致javascript无法正确识别哪个单元格被点击。 id必须是唯一的。
2. 获取id的方法错误: $("#showing").parent().parent().find(".line").attr('id').replace(/[^0-9]/gi, "") 这段代码试图获取行元素的id，但方法过于复杂且容易出错。 更好的方法是直接从被点击的单元格的父元素（）获取id。
3. 下拉框内容更新: 选择下拉框后，代码只显示了"选项一"，这是因为$(obj).parent().text(value) 将选择的文本直接赋值给了单元格，而不是将选择的选项的值或文本插入到单元格中。

为了解决这些问题，我们需要修改代码如下：

首先，去除重复的id属性，并修改为更合理的结构。例如，可以为每一行添加一个唯一的类名和数据属性，用来存储行id。


MakeSong
AI音乐生成，生成高质量音乐，仅需30秒的时间
下载

    

        

            
列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。 同时，添加必要的错误处理机制，以提高代码的健壮性。