极客观点
项目管理
HarmonyOS
想实现点击表格中每行文本一（也就是第一列的各单元格），然后弹出下拉框，选择下拉框其中一项后，单元格中的内容变为选择后的内容。
遇到的问题：
1、不能正常获取所点击行tr中的id值，只能获取一个值。
2、选择下拉框后也是只能显示选项一，不能显示选择后的内容。
3、用js dom或者jq怎么实现想要的效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>table单元格单击变成下拉框，失去焦点后，变成文本形式</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
function showing_select(){
if(event.srcElement.tagName!="TD") return;//如果点击了未做改变，还原文本
var t = event.srcElement.innerHTML;//得到改变前的值
event.srcElement.innerHTML = div1.innerHTML;//点击后，引入div域
event.srcElement.children[0].value = t;//得到选择值
event.srcElement.children[0].style.width = "100%";//设置下拉框宽度
var id = $("#showing").parent().parent().find(".line").attr('id').replace(/[^0-9]/gi, ""); //获取当前id值
}
function removethis(obj){
var value = $("#sex option:selected").text();//得到选择的值，这个地方我传的是text，因为后台我做了文本判断，建议传value
$(obj).parent().text(value);//把选择的值变成文本放到td中
$(obj).remove();//移除select
showing_select();
var id = $("#showing").parent().parent().find(".line").attr('id').replace(/[^0-9]/gi, ""); //获取当前id值
var url = "/http/xx.php";
$.ajax({
type: 'POST',
url:url,
data: { "userId": id, "Sex": value},
dataType: "json",
async: true,
});
}
</script>
</head>
<body>
<div id="div1" style="display:none">
<select id="sex" onblur="removethis(this)" style="width:100%;">
<option value="0">选项一</option>
<option value="1">选项二</option>
<option value="2">选项三</option>
<option value="3">选项四</option>
</select>
</div>
<table>
<tr>
<th style="width:80px;">列1</th>
<th style="width:80px;">列2</th>
<tr>
<tr class="line" id="#1">
<td onclick="showing_select()" id="showing">一行文本1</td>
<td id="showing_b">一行文本2</td>
</tr>
<tr class="line" id="#2">
<td onclick="showing_select()" id="showing">二行文本1</td>
<td id="showing_b">二行文本2</td>
</tr>
<tr class="line" id="#3">
<td onclick="showing_select()" id="showing">三行文本1</td>
<td id="showing_b">三行文本2</td>
</tr>
<tr class="line" id="#4">
<td onclick="showing_select()" id="showing">四行文本1</td>
<td id="showing_b">四行文本2</td>
</tr>
<tr class="line" id="#5">
<td onclick="showing_select()" id="showing">五行文本1</td>
<td id="showing_b">五行文本2</td>
</tr>
<tr class="line" id="#6">
<td onclick="showing_select()" id="showing">六行文本1</td>
<td id="showing_b">六行文本2</td>
</tr>
</table>
</body>
</html>