Yazılım Örnekleri

jquery span elementini input olarak değiştirme scriptimi paylaşacağım sizlerle, tabiki bu scriptle biraz oynayarak istediğiniz elementleri başka elementlerle de değiştirebilirsiniz. 

Bu örnekte span içindeki değere tıkladığınızda, span elementini input ile değiştiyor ve input içine yeni değerinizi giriyorsunuz. 

Örnekteki değişen yeni değeri nasıl veritabına ajax ile kaydedeceğinizi de ilerdeki örneklerde paylaşacağım.

<script>
 textkutusu=false;
$(function () {
    $(document).on("click","#textolcak", function () {
        if(!textkutusu) {
        var input = $("<input />", {"type": "text","id": "textolcak", "name": "aname", "value": $(this).html()});
        $(this).parent().append(input);
        $(this).remove();
        input.focus();
       textkutusu=true;
        } 
         
    });
    
    
    
    $(document).on("blur","#textolcak", function () { 
        if(textkutusu) {
        var span = $("<span />", {"id": "textolcak"});
        $(this).parent().append($(span).html($(this).val()));
        $(this).remove();
        textkutusu=false;  
        } 

        });
    

 }); 
</script> 
  
              <table class="table table-condensed" id="tablo">
        
        
                <tr >
                  <td style="width:40px;">1.</td>
                  <td><span id="textolcak"  >Burayı Tıkla ve Yaz</span><input type="hidden"  value="1" name="kat_id" /> </td>   
                </tr>
                 
                
                  <tr id="indis">
                  <td style="width:40px;">2.</td>
                  <td> <span id="textolcak">Burayı Tıkla ve Yaz</span><input type="hidden" value="2" name="kat_id" />  </td>  
                </tr>
                 
                 
              </table>