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

【问题标题】：How to remove displayed value from td and replace with input field?如何从 td 中删除显示的值并替换为输入字段？
【发布时间】：2016-01-12 04:33:10
【问题描述】：

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

<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>

JavaScript： //如果用户开始在可用字段中输入，此代码会显示保存按钮。

 $(document).ready(function() {
            $(".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>');
  }

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

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

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

$(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();

}

【讨论】：

所以我有一个关于我正在考虑的解决方案的问题，因为我有更多的工作人员应该传递给 deleteSlot 函数，它使一切变得更加复杂。如果我用两个输入抓取标签并将其设置在显示名称的 div 的上方，并将样式设置为 display:none。用户点击删除图像后，名字应该被删除，然后属性显示：无。这有意义吗？提前致谢。
这会起作用，除非您替换代码时不再绑定 .keyup 事件的问题。我的猜测是您插入的新代码没有附加 keyup 事件，因为它发生在您在 doc.ready 调用中应用它之后。您可以将代码更改为始终在 DOM 中具有输入字段，但只需使用 display:none。是这个意思吗？
是的，我就是这么想的。我试过了，效果很好。感谢您的帮助！

【解决方案2】：

问题在于您传递的 id 很奇怪。由于 id 前面已经有 '#'，jquery 选择器将无法应用 target by id。如果你确实需要在id前面加上'#'，那么你需要应用id equal to选择器。

 $('#' + TimeSlotID)

应该是

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

例如：https://jsfiddle.net/DinoMyte/6d5ry9br/5/

【讨论】：