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

How to remove displayed value from td and replace with input field?

本文关键字：替换 字段 输入 显示 td 删除      更新时间：2023-09-26

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

<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函数中使用的这段代码确实将name替换为输入字段，但如果我开始在该字段中键入，我就不会像其他字段中那样显示Save按钮。我不能100%确定这是否可以按照我开始的方式完成，或者我应该使用其他方法。我尝试了追加，但没有成功，每次点击都会给我额外的输入字段。如果有人知道解决这个问题的更好方法，请告诉我。

我认为需要重新应用事件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();
}

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

 $('#' + TimeSlotID)

应该是

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

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

相关文章：