Javascript 如何从td中删除显示值并替换为输入字段？

我有一个显示名称和输入字段的动态表。若名称显示在表行中，则用户可以选择删除该名称。我知道如何从特定的表行中删除值，但用输入字段替换同一点时遇到问题，输入字段应该与其他可用字段相同。以下是我目前掌握的代码：

<cfoutput>
     <tr>
        <td>#TimeFormat(CurrentTime,'hh:mm tt')#</td>
        <td onClick="deleteSlot('#TimeSlotID#')">
            <cfif UserID GT 0>
                <label>
                    <div id="#TimeSlotID#">
                        (<b>#First# #Last#</b>)
                        <img src="images/delete.png"/>
                    </div>
                </label>
            <cfelseif UserID EQ -1>
                <label>
                    <input type="text" name="email" id="email#currentRow#" class="email">
                    <input type="button" name="slot" id="slot#currentRow#" class="slot" value="Save" onClick="saveTime(this,'#TimeSlotID#')" style="display: none">
                </label>
            </cfif>
        </td>
     </tr>
 </cfoutput>

//这是我试图从单元格中删除名称并替换为输入字段的代码

 function deleteSlot(TimeSlotID){
      $('#' + TimeSlotID).replaceWith('<label><input type="text" name="email" id="email#currentRow#" class="email"><input type="button" name="slot" id="slot#currentRow#" class="slot" value="Save" onClick="saveTime(this,'#TimeSlotID#')" style="display: none"></label>');
  }

函数删除插槽（TimeSlotID）{
$（'#'+TimeSlotID）.替换为（''）；
}

---

我目前在deleteSlot函数中使用的这段代码确实会用输入字段替换名称，但如果我开始在该字段中键入，我就不会像其他字段中那样显示“保存”按钮。我不能100%确定这是否可以按照我开始的方式完成，或者我应该使用其他方法。我尝试了append，但没有成功，每次单击都会给我额外的输入字段。如果有人知道解决此问题的更好方法，请告诉我。

我认为需要重新应用事件密钥：

$(document).ready(function() {
  applyKeyUp();
});
function applyKeyUp() {
    $(".email").keyup(function(e) {
        if($(this).val() != '') {
            $(".email").not(this).attr('disabled','disabled');
            $(this).next(".slot").show();
        } else {
            $(".email").removeAttr('disabled');
            $(this).next(".slot").hide();
        }
    });
}
function deleteSlot(TimeSlotID){
  $('#' + TimeSlotID).replaceWith('<label><input type="text" name="email" id="email#currentRow#" class="email"><input type="button" name="slot" id="slot#currentRow#" class="slot" value="Save" onClick="saveTime(this,'#TimeSlotID#')" style="display: none"></label>');
  applyKeyUp();

}

$（文档）.ready（函数（）{
applyKeyUp（）；
});
函数applyKeyUp（）{
$（“.email”）.keyup（函数（e）{
if（$（this.val（）！=“”）{
$（“.email”）.not（this.attr（'disabled'，'disabled'）；
$（this.next（“.slot”）.show（）；
}否则{
$（“.email”）.removeAttr（'disabled'）；
$（this.next（“.slot”）.hide（）；
}
});
}
函数deleteSlot（TimeSlotID）{
$（'#'+TimeSlotID）.替换为（''）；
applyKeyUp（）；
}

问题在于您传递的id奇怪。由于

id

前面已经有

“#”

，jquery选择器将无法按id应用

目标。如果确实需要在id前面添加
“#”
，则需要将
id应用于等于
选择器

 $('#' + TimeSlotID)

应该是

$("[id = '" + TimeSlotID + "']")

示例：
所以我有一个关于解决方案的问题，我一直在考虑，因为我有更多的员工应该交给deleteSlot函数，这会使一切变得更加复杂。若我抓取带有两个输入的标签，将其设置在显示名称的div内部，并将样式设置为display:none，会怎么样。用户单击删除图像后，应删除第一个名称，然后属性显示：无。这有意义吗？提前感谢。这将起作用，除非在替换代码时不再绑定.keyup事件的问题。我猜您插入的新代码没有附加keyup事件，因为它发生在您在doc.ready调用中应用它之后。您可以将代码更改为在DOM中始终具有输入字段，但只需使用display:none即可。这就是你的意思吗？是的，我就是这么想的。很好，我试过了。谢谢你的帮助！
$("[id = '" + TimeSlotID + "']")