表行值编辑无法正常工作
单击所有编辑按钮，然后尝试取消第一个。它不会取消。 谁能发现那个错误？
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>
答案 0 :(得分：3)
问题是你的变量currentValue。当一次编辑一个字段时，它工作正常，但是当你在关闭后尝试进行更多编辑时，第一个currentValue被赋值为null，它会阻止关闭休息的可能性（如果关闭函数中的语句）。另一个问题是，这样一旦开始编辑多个字段，您将丢失保存的文本以进行输入。可能的解决方案是在每个字段的数据属性中保存文本。
$(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>
答案 1 :(得分：2)
问题是，currentValue获得您在edit点击的最后一个值，当您cancel一个时，它会获得最后一个输入值并将其转换为null所以其他cancel按钮不起作用。
您可以使用ID，以便分别存储所有值：
$(function() {
var currentValue = {};
$(".edit").click(function(e) {
e.preventDefault();
e.stopImmediatePropagation();
var btn = $(this);
var td = btn.closest("tr").find(".editable");
currentValue[td.attr("id")] = td.text();
if (btn.text() === "edit") {
td.html("<input id='"+td.attr("id")+"' type='text' value=" + currentValue[td.attr("id")] + " />");
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.attr("id")]) {
td.html(currentValue[td.attr("id")]);
$(this).parent().find(".edit").html("edit");
currentValue[td.attr("id")] = null;
}
});
});<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 id="1" 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 id="2" 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 id="3" class="editable">RecID3</span></td>
<td>Val3.1</td>
<td>
<button class="edit">edit</button>
<button class="cancel">cancel</button>
</td>
</tr>
</table>
答案 2 :(得分：0)
请将以下代码放入取消按钮
$(".cancel").click(function (e) {
e.preventDefault();
e.stopImmediatePropagation();
var td = $(this).closest("tr").find(".editable");
if(currentValue && $(this).closest("tr").find("input").length==1)
{
td.html(currentValue);
$(this).parent().find(".edit").html("edit");
currentValue = null;
}
});
现在，您只能取消已按下哪一行编辑。 在编辑模式下，在所有其他行中没有使用取消按钮，因此我已禁用它们。