javascript - 表格行值编辑无法正常工作

Question

表格行值编辑无法正常工作

单击所有编辑按钮，然后尝试取消第一个按钮。它不会取消。 谁能找到那个错误吗？

http://jsfiddle.net/9KEGd/185/

$(function() {
  var currentValue;

  $(".edit").click(function(e) {
    e.preventDefault();
    e.stopImmediatePropagation();
    var btn = $(this);
    var td = btn.closest("tr").find(".editable");
    currentValue = td.text();

    if (btn.text() === "edit") {
      td.html("<input type='text' value=" + currentValue + " />");
      btn.html("save");
    } else {
      td.html(td.find("input").val());
      btn.html("edit");
    }
  });

  $(".cancel").click(function(e) {
    e.preventDefault();
    e.stopImmediatePropagation();
    var td = $(this).closest("tr").find(".editable");
    if (currentValue) {
      td.html(currentValue);
      $(this).parent().find(".edit").html("edit");
      currentValue = null;
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<table id="tabledata">
  <thead>
    <th>RecID</th>
    <th>Col1</th>
    <th>opt</th>
  </thead>
  <tr>
    <td>
      <a>
        <div class="nestedtable">Tableshowing no need edit</div>
      </a><span class="editable">RecID1</span></td>
    <td>Val1.1</td>
    <td><button class="edit">edit</button><button class="cancel">cancel</button></td>
  </tr>
  <tr>
    <td>
      <a>
        <div class="nestedtable">Tableshowings no need edit</div>
      </a><span class="editable">RecID2</span></td>
    <td>Val2.1</td>
    <td><button class="edit">edit</button><button class="cancel">cancel</button></td>
  </tr>
  <tr>
    <td>
      <a>
        <div class="nestedtable">Tableshowing no need edit</div>
      </a><span class="editable">RecID3</span></td>
    <td>Val3.1</td>
    <td><button class="edit">edit</button><button class="cancel">cancel</button></td>
  </tr>
</table>

Answer 1

问题是你的变量currentValue。当一次编辑一个字段时，它工作正常，但是当您在关闭第一个字段后尝试进行更多编辑时，currentValue 被分配为 null，并且它阻止了关闭其余字段的可能性(close 函数中的 if 语句)。另一个问题是，通过这种方式，当一次开始编辑多个字段时，您将丢失保存的输入文本。可能的解决方案是在每个字段的数据属性中保存文本。

$(function () {
		
    $(".edit").click(function (e) {
    	e.preventDefault();
        e.stopImmediatePropagation();
        var btn = $(this);
        var td = btn.closest("tr").find(".editable");
        
        var currentValue = td.text();

        //Save current text in td data attribute
        $(td).data("current-value", currentValue);
        
        if(btn.text() === "edit")
        {
        	td.html("<input type='text' value="+currentValue+" />");
            btn.html("save");
        }
        else
        {
        	td.html(td.find("input").val());
            btn.html("edit");
        }

    });
    
     $(".cancel").click(function (e) {
    	e.preventDefault();  
        e.stopImmediatePropagation();
        var td = $(this).closest("tr").find(".editable");
        
        //Read data attribute to get saved text
        var currentValue = $(td).data("current-value");
        if(currentValue != "")
        {
        	td.html(currentValue);
            $(this).parent().find(".edit").html("edit");

            //Set attribute to empty string
            $(td).data("current-value", "");
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tabledata">
    <thead>
        <th>RecID</th>
        <th>Col1</th>
        <th>opt</th>
    </thead>
    <tr>
    <td><a><div class="nestedtable">Tableshowing no need edit</div></a><span class="editable">RecID1</span></td>
        <td>Val1.1</td>
        <td><button class="edit">edit</button><button class="cancel">cancel</button></td>
    </tr>
    <tr>
    <td><a><div class="nestedtable">Tableshowings no need edit</div></a><span class="editable">RecID2</span></td>
        <td>Val2.1</td>
        <td><button class="edit">edit</button><button class="cancel">cancel</button></td>
    </tr>
    <tr>
        <td><a><div class="nestedtable">Tableshowing no need edit</div></a><span class="editable">RecID3</span></td>
        <td>Val3.1</td>
        <td><button class="edit">edit</button><button class="cancel">cancel</button></td>
    </tr>
</table>