点击表格单元格显示下拉菜单并更新单元格内容
本文将解决一个常见的网页开发问题：如何点击表格单元格，使其转换为下拉菜单，并在用户选择后将所选内容更新到单元格中，同时避免失去焦点后内容失效的问题。
代码中存在以下几个问题：
- id重复: 代码中所有第一列的单元格都使用了相同的id "showing"，这会导致javascript无法正确识别哪个单元格被点击。 id必须是唯一的。
- 获取id的方法错误: $("#showing").parent().parent().find(".line").attr('id').replace(/[^0-9]/gi, "") 这段代码试图获取行元素的id，但方法过于复杂且容易出错。 更好的方法是直接从被点击的单元格的父元素（<tr>）获取id。
- 下拉框内容更新: 选择下拉框后，代码只显示了"选项一"，这是因为$(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。 同时，添加必要的错误处理机制，以提高代码的健壮性。
