我想寫一個(gè)事件，當(dāng)使用者雙擊表格單元格時(shí)，該單元格會(huì)用一個(gè)HTML表單進(jìn)行更新。在表單顯示的時(shí)候，我不希望雙擊事件起作用。如果使用者透過按下取消按鈕來取消表單，或者透過按下提交按鈕來提交表單，那麼表格儲(chǔ)存格應(yīng)該分別更新為原始值或更新後的值，並且雙擊事件應(yīng)該再次起作用。
如何實(shí)作這個(gè)功能？
這是我目前的程式碼。如果你雙擊“click me”，你會(huì)看到一個(gè)表單出現(xiàn)。如果你再次雙擊表單，你會(huì)看到表單再次更新，因?yàn)殡p擊事件在表單顯示的時(shí)候仍然被觸發(fā)。
我如何只在我的單元格顯示值時(shí)觸發(fā)雙擊事件，而不顯示HTML表單。
只是為了澄清，這將是一個(gè)存儲(chǔ)單個(gè)浮點(diǎn)值的單元格，如果我首先雙擊該值，然後按下提交按鈕進(jìn)行更新，或者按下取消按鈕進(jìn)行取消，那麼該單元格將更新為其原始值，然後您可以再次雙擊該值。
function renderMultEditBox(id, mult) {
$('#mult_1').html($('#mult_1').html() + '<h2>Title Text</h2><form><input type="text" name="a"><input type="text" name="b"><button type="button"><b>Cancel</b></button>');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
<tr>
<td style="text-align: right; cursor: pointer;" id="mult_1" ondblclick="renderMultEditBox(this.innerHTML)">double-click me</td>
</tr>
</table> 
2
0
0
這是我會(huì)這樣做的。
首先，將表單隱藏在DOM中，這樣可以更容易地多次使用它和/或在多個(gè)位置使用它。
然後，在儲(chǔ)存格上雙擊時(shí)，複製該表單，移除隱藏類，並將其插入到儲(chǔ)存格中。這樣它就更像一個(gè)模板。
尋找jQuery clone 以取得更多資訊... 因?yàn)槟部梢匝}製按鈕的事件處理程序... 這將減少程式碼重複。需要再讀5分鐘才能實(shí)現(xiàn) ;)
$("#tableWithForms td").on("dblclick", function(event){
let template = $("#formTemplate").clone().removeAttr("id").removeClass("hidden")
$(this).html(template)
})
.hidden{
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" id="tableWithForms">
<tr>
<td style="text-align: right; cursor: pointer;">雙擊我</td>
</tr>
</table>
<!-- 下面使用一個(gè)類來隱藏 -->
<div id="formTemplate" class="hidden">
<h2>標(biāo)題文本</h2>
<form>
<input type="text" name="a">
<input type="text" name="b">
<button type="button"><b>提交</b></button>
<button type="button"><b>取消</b></button>
</form>
</div>
最簡單的方法可能是將表單和表格單元格內(nèi)容放在單獨(dú)的 <div> 中，然後可以切換它們的可見性：
$('#mult_1_content').dblclick(function() {
$('#mult_1_form').show();
$('#mult_1_content').hide();
});
$('#mult_1_form_cancel').click(function() {
$('#mult_1_form').hide();
$('#mult_1_content').show();
});
#mult_1_form {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
<tr>
<td style="text-align: right; cursor: pointer;" id="mult_1">
<div id="mult_1_content">雙擊我</div>
<div id="mult_1_form">
<h2>標(biāo)題文本</h2>
<form>
<input type="text" name="a"><input type="text" name="b">
<button type="button" id="mult_1_form_cancel"><b>取消</b></button>
</form>
</div>
</td>
</tr>
</table>
