將文本轉換爲輸入，允許編輯，然後允許重置爲原始值的文本

Question

我正在創建一個帶有普通文本的表格，在文本旁邊有一個按鈕或圖標，單擊該文本時會將文本轉換爲一個輸入框，並將按鈕或圖標變成一個重置按鈕/圖標。一旦按下此鍵，該值將以純文本格式返回到初始值。

我有下面的代碼做文字和輸入之間的轉換：

https://jsfiddle.net/n23pjLma/

 <table id="container"> 
      <tr><th>Tabular Data</th></tr> 
      <tr style="height:50px"> 
      <td><input class="form-control" type="text" value="Test 1" /></td> 

      <td><button class="btn btn-danger">Edit</button> <button class="btn btn-success">Reset</button></td> 
     </tr> 
     <tr style="height:50px"> 
      <td><input class="form-control" type="text" value="Test 1" /></td> 
      <td><button class="btn btn-danger">Edit</button> <button class="btn btn-success">Reset</button></td> 
     </tr> 
     <tr style="height:50px"> 
      <td><input class="form-control" type="text" value="Test 1" /></td> 
      <td><button class="btn btn-danger">Edit</button> <button class="btn btn-success">Reset</button></td> 
     </tr> 
    </table> 

     <script> function setupRows(context) { 
    $("span.view", context).remove(); 
    $('input', context).each(function() { 
    $("<span />", { text: this.value, "class":"view" }).insertAfter(this); 
    $(this).hide(); 
    }); 
} 
setupRows('#container'); 

     $("button").toggle(function() { 
     $(this).closest("tr").find("input, span.view").toggle(); 
     }, function() { 
      setupRows($(this).closest("tr")); 
     }); 
    </script> 

我已經和是有一個按鈕（而不是兩個）掙扎在任何給定時間，然後以普通文本切換回默認值。

任何想法？

Answer 1

嗨，這是否有幫助？我添加了一個「數據」元素的表單輸入，並使用addClass和removeClass跟蹤按鈕狀態....

（CSS只是添加和刪除輸入框上的邊界，當主動/只讀）

JS FIDDLE v4

input { 
     border: none; 
    } 
    .editButton { 
     border: solid 1px #000; 
    } 

    <table id="container"> 
      <tr><th>Tabular Data</th></tr> 
      <tr style="height:50px"> 
      <td><input class="form-control" data-default-value="Test 1" type="text" value="Test 1" readonly /></td> 
      <td><button class="btn btn-danger">Edit</button></td> 
     </tr> 
     <tr style="height:50px"> 
      <td><input class="form-control" data-default-value="Test 2" type="text" value="Test 2" readonly /></td> 
      <td><button class="btn btn-danger">Edit</button></td> 
     </tr> 
     <tr style="height:50px"> 
      <td><input data-default-value="Test 3" class="form-control" type="text" value="Test 3" readonly /></td> 
      <td><button class="btn btn-danger">Edit</button></td> 
     </tr> 
    </table> 

    (function($){ 

     $(function(){ //document.ready 

      $(".btn").on('click', function() { 
       if ($(this).hasClass('editButton')) { 
        $(this).removeClass('editButton'); 
        $(this).html('Edit'); 
        $(this).closest('tr').find('input').prop('readonly', true); 
        var defaultValue = $(this).closest('tr').find('input').data(this, 'default-value'); 
        $(this).closest('tr').find('input').val(defaultValue[0].defaultValue); 
       } else { 
        $(this).addClass('editButton'); 
        $(this).html('Reset'); 
        $(this).closest('tr').find('input').prop('readonly', false); 
        $(this).closest('tr').find('input').select().focus(); 
       } 
      }); 
     }); 

    })(jQuery); 

Answer 2

試試這個，添加reset類編輯按鈕，並編寫腳本：

SCRIPT：

$(document).ready(function(){ 
     $("button").on("click", function(){ 
     if($(this).hasClass("reset")) { 
     var val1=$(this).closest("td").siblings("td").find("input").val(); 
     if(val1!="") { 
      $(this).closest("td").siblings("td").find("input").replaceWith(val1); 
      $(this).text("Edit"); 
      $(this).removeClass("reset"); 
      $(this).removeClass("edit");  
     } 
     } 
     else { 
      var val1=$(this).closest("td").siblings("td").text();  $(this).closest("td").siblings("td").empty().append("<input/>").find("input").val(val1); 
      $(this).removeClass("edit"); 
      $(this).addClass("reset");  
      $(this).text("Reset") 

     } 
    }); 
}); 

HTML：

<table id="container"> 
      <tr><th>Tabular Data</th></tr> 
      <tr style="height:50px"> 
      <td><input class="form-control" type="text" value="Test 1" /></td> 

      <td><button class="btn btn-danger reset">Reset</button> </td> 
     </tr> 
     <tr style="height:50px"> 
      <td><input class="form-control" type="text" value="Test 1" /></td> 
      <td><button class="btn btn-danger reset">Reset</button> </td> 
     </tr> 
     <tr style="height:50px"> 
      <td><input class="form-control" type="text" value="Test 1" /></td> 
      <td><button class="btn btn-danger reset">Reset</button> </td> 
     </tr> 
    </table> 

DEMO

Answer 3

你必須在執行編輯操作保存舊值。

請在我的解決方案 JSFiddle example

HTML看看

<table id="container"> 
    <tr><th>Column 1</th><th>Column 2</th></tr> 
    <tr> 
     <td id="col_1_1">Test 1-1</td> 
     <td id="col_1_2">Test 1-2</td> 
     <td id="actions_1"><button line="1" class="btn btn-danger">Edit</button></td> 
    </tr> 
    <tr> 
     <td id="col_2_1">Test 2-1</td> 
     <td id="col_2_2">Test 2-2</td> 
     <td id="actions_2"><button line="1" class="btn btn-danger">Edit</button></td> 
    </tr> 
    <tr> 
     <td id="col_3_1">Test 3-1</td> 
     <td id="col_3_2">Test 3-2</td> 
     <td id="actions_3"><button line="1" class="btn btn-danger">Edit</button></td> 
    </tr> 
</table> 

腳本

var old_values = {}, 
    num_cols = 2, 
    line_data = {}, 
    i; 

$("#container").on('click',"button",function(){ 
    var current_line = $(this).attr('line'); 
    if($(this).text() == 'Edit'){ 
     for(i=1;i<=num_cols;i++){ 
      line_data[i]=$("#col_"+current_line+"_"+i).html(); 
      $("#col_"+current_line+"_"+i).html('<input type="text" id="col_'+current_line+'_'+i+'_input" value="'+line_data[i]+'" class="form-control" />'); 
     } 
     old_values[current_line] = line_data; 
     $('#actions_'+current_line).html('<button line="'+current_line+'" class="btn btn-success">Save</button><button line="'+current_line+'" class="btn btn-default">Reset</button>'); 
    } 
    else if ($(this).text() == 'Save'){ 
     // save data 
     for(i=1;i<=num_cols;i++){ 

      $("#col_"+current_line+"_"+i).html($("#col_"+current_line+"_"+i+"_input").val()); 
     } 
     $('#actions_'+current_line).html('<button line="'+current_line+'" class="btn btn-danger">Edit</button>'); 

    } 
    else 
    { 
     for(i=1;i<=num_cols;i++){ 

      $("#col_"+current_line+"_"+i).html(old_values[current_line][i]); 
     } 
     $('#actions_'+current_line).html('<button line="'+current_line+'" class="btn btn-danger">Edit</button>'); 
    } 
});