在HTML中我们如何将用户可编辑的内容存储到变量中

时间:2016-06-09 06:45:58

标签: javascript jquery html css

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

$(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>

1 个答案:

答案 0 :(得分: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>