2016-06-09 71 views
-1

这是我的可编辑表格,我想将可编辑内容存储到varibale.help中我现在的脚本仅用于将td更改为可编辑的 我的主要目标是将此可编辑数据存储到变量中,并使用此变量控制另一个div 是否可以使用脚本存储用户编辑数据?in html我们如何将用户可编辑内容存储到变量中

$(function() { 
    $("td.task1").dblclick(function() { 

     var OriginalContent = $(this).text(); 
     $(this).addClass("cellEditingtask1") 

     $(this).html("<input type='text' value='" + OriginalContent + "' />"); 
    }) 
.editableTable { 
    position:static; 
     width:100%; 
     border-collapse:collapse; 


} 
.editableTable td { 
    border: 1px solid; 
    border-color: lightgray; 
    overflow:hidden; 
    height:17px; 
    /*max-height:10px;*/ 

} 



    .editableTable .cellEditingtask1 input[type=text]{ 
     width:100%; 
    border:none; 
    /*font-size:9px;*/ 
     /*text-align: center;*/ 
    background-color:transparent; 
    color: rgb(178,178,178); 

    } 
    .editableTable .cellEditingsub1 { 
     padding: 0; 

} 
    .editableTable .cellEditingsub1 input[type=text]{ 
     width:100%; 
    border:none; 
    font-size:12px; 
     text-align: center; 
    background-color:transparent; 
     color: rgb(102,102,102); 

    } 
    .editableTable .cellEditingsub1 { 
     padding: 0; 

} 
     .editableTable .cellEditingmain1 input[type=text] { 

      width: 100%; 
      border: none; 
      font-size: 13px; 
      text-align: left; 
      background-color: transparent; 
      color: rgb(0,0,0); 
     } 
<html> 
    <body> 
    <table id="tableleft" class="editableTable"> 
     <tr> 
     <td class="task1">23</td> 
     </tr> 

回答

0

尝试在事件的内容这一功能。这是你想要的吗?

<script> 
    $(function() { 
    $("td.task1").dblclick(function() { 
     var OriginalContent = $(this).text(); 
     $(this).addClass("cellEditingtask1"); 

     $(this).html("<input id='editInput' type='text' value='" + OriginalContent + "' />"); 
    }); 


    $("td.task1").focusout(function() { 

     var OriginalContent = $("td.task1 #editInput").val(); 
     $(this).removeClass("cellEditingtask1"); 
     $(this).html(OriginalContent); 
     alert(OriginalContent); 
    }); 

    }); 
</script> 
相关问题