Question

我希望创建一个包含普通文本的表格，在所述文本旁边有一个按钮或图标，单击该按钮或图标会将文本转换为输入框，然后将按钮或图标转换为重置按钮/图标。按下此按钮后，该值将以纯文本形式返回初始值。

我有以下代码来进行文本和输入之间的转换：

      <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

嗨，这有什么帮助吗？我在表单输入中添加了一个“data”元素，并使用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>');
    }
});

将文本转换为输入，允许编辑，然后允许重置回原始值的文本

3 个答案: