table单元格 单击 变成下拉框，失去焦点后，变成文本形式

效果图： 点击前

点击后：

失去焦点后：

代码：
先是给td加了一个showing 事件 ，目的是为了实现点击文本时，塞入一个select下拉框

<td class="center" onclick="showing()" id="showing">
    <c:if test="${employes.sex eq '0'}">女</c:if> 
    <c:iftest="${employes.sex eq '1'}">男</c:if>
</td>

然后，我在table外面，写了一个div 域：

<div id="div1" style="display:none">
    <select id="sex" onblur="removethis(this)" style="width:40px;">
        <option value="0">女</option>
        <option value="1">男</option>
    </select>
</div>

js代码：

function showing(){
              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("input[name='ids']").attr('id');
        } 

        function removethis(obj){
            var value = $("#sex option:selected").text();//得到选择的值，这个地方我传的是text，因为后台我做了文本判断，建议传value
            $(obj).parent().text(value);//把选择的值变成文本放到td中
            $(obj).remove();//移除select
            showing();
            var id = $("#showing").parent().parent().find("input[name='ids']").attr('id');
            var url = "<%=basePath%>"+"employee/updateDutySexByUserId.do";
             $.ajax({    
                 type: 'POST',
                 url:url,   
                 data: { "userId": id, "Sex": value},  
                 dataType: "json",
                 async: true,
               });