当鼠标点击span时，span会根据需要变成input或select标签，光标移开时，又变回span标签来展示编辑后的内容。

HTML代码如下（span里的值是动态添加的，与此无关）：

1           
 2               企业性质 3                  4           
 5           
 6               企业规模 7                8           
 9           
10               企业简介11                 12           
13           
14           
15           
16               联系方式17               
      
18           
19           
20               企业地址21               22           
23           
24                  25           
26           
27               企业电话28               29               30                   02131               32               33           
34           
35               企业邮箱36               37           
38           
39               企业网址40               41           

js代码如下：

1、input select textarea转span

1 var switchToSpan=function () { 2             // console.log($(this).attr("id")); 3             var cId=$(this).attr("id");//获取当前点击input的id 4            //console.log($("#"+cId).prop('nodeName').toLowerCase()); 5             var thisTag=$("#"+cId).prop('nodeName').toLowerCase(); 6         var a,b=null; 7         if(thisTag=="input"){ 8             a=$(this).val(); 9              b=switchToInput;10         }11         else if(thisTag=="select"){12              a=$(this).find("option:selected").text();//获取selected的option文本值13              b=switchToSelect;14         }15         else if(thisTag=="textarea"){16             a=$(this).val();17             b=switchToTextarea;18         }19         var $span=$("",{20                     text: a21                 });22             $span.addClass(cId);23             $span.attr("id",cId);24             $(this).replaceWith($span);25             $span.on("click",b);26 };

2、span转input

1 var switchToInput=function () { 2             //console.log($(this).attr("id")); 3             var cId=$(this).attr("id");//获取当前点击span的id 4             var $input=$("",{ 5                 val:$(this).text(),     6                 type:"text" 7             }); 8             $input.addClass(cId); 9             $input.attr("id",cId);10             $(this).replaceWith($input);11             $input.on("blur",switchToSpan);//失去焦点时，执行switchToSpan函数12             $input.select();13         };

  3、span转select

1  var switchToSelect=function () { 2  3             var cId = $(this).attr("id");//获取当前点击input的id 4             var $select = $(""); 5             var arr=[["国有企业","集体企业","私营企业","三资企业"],["人数<20","20≤人数<300","300≤人数<1000","1000≤人数<5000","人数≥5000"]]; 6             var j=null; 7             if(cId=="companyType"){ 8                 //var arr1=new Array("国有企业","集体企业","私营企业","三资企业"); 9                 //console.log(arr1);10                 $select.addClass("midBtn1");11                 j=0;12             }13             else if(cId=="companySize"){14                 j=1;15                 $select.addClass("midBtn1");16             }17             for(var i=0;i
     
      " +arr[j][i]+"");19             }20             $select.addClass(cId);21             $select.attr("id", cId);22             $(this).replaceWith($select);23             $select.on("blur",switchToSpan);24 }
     

4、span转textarea

1  var switchToTextarea=function () { 2             var cId = $(this).attr("id"); 3             var $textarea=$(""); 4             $textarea.val($(this).text()); 5             $textarea.addClass(cId); 6             $textarea.attr("id",cId); 7             $(this).replaceWith($textarea); 8             $textarea.on("blur",switchToSpan); 9             $textarea.select();10 11         }

5、给span添加点击事件

1     $(".spanToInput").on("click",switchToInput);2     $(".spanToSelect").on("click",switchToSelect);3     $(".spanToTextarea").on("click",switchToTextarea);