jQuery操作编辑页面，span与input标签之间的随时转换
当鼠标点击span时，span会根据需要变成input或select标签，光标移开时，又变回span标签来展示编辑后的内容。
HTML代码如下（span里的值是动态添加的，与此无关）：
1 <li> 2 <label for="companyType">企业性质</label> 3 <span class="companyType spanToSelect" id="companyType"></span> 4 </li> 5 <li> 6 <label for="companySize">企业规模</label> 7 <span class="companySize spanToSelect" id="companySize"></span> 8 </li> 9 <li> 10 <label for="companyMsg" class="companyMsgLabel">企业简介</label> 11 <span class="companyMsg spanToTextarea" id="companyMsg"></span> 12 </li> 13 <br> 14 <br> 15 <li> 16 联系方式 17 <hr> 18 </li> 19 <li> 20 <label for="companyAddress">企业地址</label> 21 <input type="text" name="addressSelect" id="citySelect" class="city_input" value="湖北省-武汉市-洪山区" readonly="readonly"> 22 </li> 23 <li> 24 <span id="companyAddress" class="companyAddress spanToInput"></span> 25 </li> 26 <li> 27 <label for="companyTel">企业电话</label> 28 <input type="tel" id="tel1" class="tel1" placeholder=""> 29 <select name="tel2" id="tel2" class="smallBtn2"> 30 <option value="021">021</option> 31 </select> 32 <span class="companyTel spanToInput" id="companyTel"></span> 33 </li> 34 <li> 35 <label >企业邮箱</label> 36 <span class="companyMail spanToInput" id="companyMail"></span> 37 </li> 38 <li> 39 <label for="companyIp">企业网址</label> 40 <span class="companyIp spanToInput" id="companyIp"></span> 41 </li>
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=$("<span>",{ 20 text: a 21 }); 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=$("<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 = $("<select></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].length;i++){ 18 $select.append("<option value='"+arr[j][i]+"'>" +arr[j][i]+"</option>"); 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=$("<textarea cols='50' rows='6'></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);
