jQuery操作編輯頁面，span與input標簽之間的隨時轉換

當鼠標點擊span時，span會根據需要變成input或select標簽，光標移開時，又變回span標簽來展示編輯后的內容。

HTML代碼如下（span里的值是動態添加的，與此無關）：

          <li>
              <label for="companyType">企業性質</label>
                <span class="companyType spanToSelect" id="companyType"></span>
          </li>
          <li>
              <label for="companySize">企業規模</label>
              <span class="companySize spanToSelect" id="companySize"></span>
          </li>
          <li>
              <label for="companyMsg" class="companyMsgLabel">企業簡介</label>
                <span class="companyMsg spanToTextarea" id="companyMsg"></span>
          </li>
          <br>
          <br>
          <li>
              聯系方式
              <hr>
          </li>
          <li>
              <label for="companyAddress">企業地址</label>
              <input type="text" name="addressSelect" id="citySelect" class="city_input" value="湖北省-武漢市-洪山區" readonly="readonly">
          </li>
          <li>
                 <span id="companyAddress" class="companyAddress spanToInput"></span>
          </li>
          <li>
              <label for="companyTel">企業電話</label>
              <input type="tel" id="tel1" class="tel1" placeholder="">
              <select name="tel2" id="tel2" class="smallBtn2">
                  <option value="021">021</option>
              </select>
              <span class="companyTel spanToInput" id="companyTel"></span>
          </li>
          <li>
              <label >企業郵箱</label>
              <span class="companyMail spanToInput" id="companyMail"></span>
          </li>
          <li>
              <label for="companyIp">企業網址</label>
              <span class="companyIp spanToInput" id="companyIp"></span>
          </li>

js代碼如下：

1、input select textarea轉span

var switchToSpan=function () {
            // console.log($(this).attr("id"));
            var cId=$(this).attr("id");//獲取當前點擊input的id
           //console.log($("#"+cId).prop('nodeName').toLowerCase());
            var thisTag=$("#"+cId).prop('nodeName').toLowerCase();
        var a,b=null;
        if(thisTag=="input"){
            a=$(this).val();
             b=switchToInput;
        }
        else if(thisTag=="select"){
             a=$(this).find("option:selected").text();//獲取selected的option文本值
             b=switchToSelect;
        }
        else if(thisTag=="textarea"){
            a=$(this).val();
            b=switchToTextarea;
        }
        var $span=$("<span>",{
                    text: a
                });
            $span.addClass(cId);
            $span.attr("id",cId);
            $(this).replaceWith($span);
            $span.on("click",b);
};

2、span轉input

var switchToInput=function () {
            //console.log($(this).attr("id"));
            var cId=$(this).attr("id");//獲取當前點擊span的id
            var $input=$("<input>",{
                val:$(this).text(),    
                type:"text"
            });
            $input.addClass(cId);
            $input.attr("id",cId);
            $(this).replaceWith($input);
            $input.on("blur",switchToSpan);//失去焦點時，執行switchToSpan函數
            $input.select();
        };

  3、span轉select

 var switchToSelect=function () {

            var cId = $(this).attr("id");//獲取當前點擊input的id
            var $select = $("<select></select>");
            var arr=[["國有企業","集體企業","私營企業","三資企業"],["人數<20","20≤人數<300","300≤人數<1000","1000≤人數<5000","人數≥5000"]];
            var j=null;
            if(cId=="companyType"){
                //var arr1=new Array("國有企業","集體企業","私營企業","三資企業");
                //console.log(arr1);
                $select.addClass("midBtn1");
                j=0;
            }
            else if(cId=="companySize"){
                j=1;
                $select.addClass("midBtn1");
            }
            for(var i=0;i<arr[j].length;i++){
                $select.append("<option value='"+arr[j][i]+"'>" +arr[j][i]+"</option>");
            }
            $select.addClass(cId);
            $select.attr("id", cId);
            $(this).replaceWith($select);
            $select.on("blur",switchToSpan);
}

4、span轉textarea

 var switchToTextarea=function () {
            var cId = $(this).attr("id");
            var $textarea=$("<textarea cols='50' rows='6'></textarea>");
            $textarea.val($(this).text());
            $textarea.addClass(cId);
            $textarea.attr("id",cId);
            $(this).replaceWith($textarea);
            $textarea.on("blur",switchToSpan);
            $textarea.select();

        }

5、給span添加點擊事件

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