仅使JSP页面中出现的同一字段的一个实例可编辑

Make only one instance of the same field appearing in a JSP page editable

本文关键字：一个 编辑 实例 字段 JSP 仅使      更新时间：2023-09-26

专家

这是我的代码

特定事件可以有多个通道，例如对于**

  • 事件1

    通道

    • 事件2

    通道

**最初每个事件的通道值是相同的，现在当用户想要编辑通道值时，比如对于事件1，编辑的值也反映在事件2通道中，这不应该发生，编辑后的值应该只反映在该特定事件中

在jsp中显示针对事件的通道的代码是

<div class="container-fluid left-padded">
<input data-focus-div="#" type="hidden" value="${divId}">
<div class="container-fluid">
<h4><spring:message code="event.details" />:</h4>
<c:forEach var="sendStatusForm" items="${eventStatusForm.sendStatusForms}">
<div class="row-fluid">
        <div class ="span2">
        <label><spring:message code="event.channels"></spring:message>:&nbsp; </label> 
        </div>
        <div class = "span3">
        <div class="textbox">   
            <div class="textVal">${eventStatusForm.channels}</div>
            <div id="pencil" class="span3">
            <img src="/static/img/image1.png" alt="Edit">
             </div>
            <div id="save" class="span3">
            <img src="/static/img/image2.png" alt="Save">
            </div>
            <div id="close" class="span3">
            <img src="/static/img/image3.png" alt="Close">
            </div>
        </div>  
        </div>
    </DIV>
</c:forEach>
</DIV>
</div>

Jquery代码是

var textValue = "";
$('#pencil').on('click', function(){
    textValue =  $('.textVal').text();
    $('.textVal').html("<input type='textbox' id='textVal' value='" + textValue + "' />");
    $(this).hide();
    $('#save, #close').show();
});
$('#save').on('click', function(){
    $('.textVal').text($('#textVal').val());
    $(this).hide();
    $('#close').hide();
    $('#pencil').show();
});
$('#close').on('click', function(){
    $('.textVal').text(textValue);
    $(this).hide();
    $('#save').hide();
    $('#pencil').show();
});

最后，CSS代码是

<style type="text/css">
.textbox {
    height:24px;
    width:90px;
    line-height:22px;
    padding:3px
}
#textVal {
    width:35px;
    margin-right:5px
}
.icons {
    float:left;
    width:20px;
    height:20px;
}
#save, #close {
    display:none;
    width:20px;
    height:20px;
    float:left
}
.textVal {
    float:left;
    width:35px;
    height:20px;
    margin-right:5px
}
#pencil {
    display:block
}
</style>

首先，在循环中使用id属性时要小心，因为您会生成无效的HTML标记。Id属性在页面中必须是唯一的，请为元素使用类。

<c:forEach var="sendStatusForm" items="${eventStatusForm.sendStatusForms}">
    <div class="row-fluid">
        <div class ="span2">
        <label><spring:message code="event.channels"></spring:message>:&nbsp; </label> 
        </div>
        <div class = "span3">
        <div class="textbox">   
            <div class="textVal">${eventStatusForm.channels}</div>
            <div class="pencil span3">
            <img src="/static/img/image1.png" alt="Edit">
             </div>
            <div class="save span3">
            <img src="/static/img/image2.png" alt="Save">
            </div>
            <div class="close span3">
            <img src="/static/img/image3.png" alt="Close">
            </div>
        </div>  
        </div>
    </DIV>
</c:forEach>

现在，在进行编辑时，只需要针对行中的特定元素，因此使用.siblings()来过滤每个事件中的元素：

var textValue = "";
$('.pencil').on('click', function(){
    textValue =  $(this).siblings('.textVal').text();
    $(this).siblings('.textVal').html("<input type='text' id='textVal' value='" + textValue + "' />");
    $(this).hide();
    $(this).siblings('.save, .close').show();
});
$('.save').on('click', function(){
    $(this).siblings('.textVal').html($(this).siblings('.textVal').find(':text').val());
    $(this).hide();
    $(this).siblings('.close').hide();
    $(this).siblings('.pencil').show();
});
$('.close').on('click', function(){
    $(this).siblings('.textVal').html(textValue)
    $(this).hide();
    $(this).siblings('.save').hide();
    $(this).siblings('.pencil').show();
});
相关文章：