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

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

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

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

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。

<table id="mytable">
    <thead>
        <tr>
            <th>列1</th>
            <th>列2</th>
        </tr>
    </thead>
    <tbody>
        <tr class="table-row" data-id="1">
            <td data-column="1">一行文本1</td>
            <td data-column="2">一行文本2</td>
        </tr>
        <tr class="table-row" data-id="2">
            <td data-column="1">二行文本1</td>
            <td data-column="2">二行文本2</td>
        </tr>
        <!-- ... more rows ... -->
    </tbody>
</table>

登录后复制

然后，修改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 = '<select class="my-select" data-row-id="' + rowId + '">';
    selectHtml += '<option value="0">选项一</option>';
    selectHtml += '<option value="1">选项二</option>';
    selectHtml += '<option value="2">选项三</option>';
    selectHtml += '<option value="3">选项四</option>';
    selectHtml += '</select>';

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

以上就是如何实现点击表格单元格显示下拉菜单并更新单元格内容？的详细内容，更多请关注php中文网其它相关文章！