使动态内容在提交后可编辑

jQuery: Make dynamic content editable after submission

本文关键字：编辑 提交 动态      更新时间：2023-09-26

我有一个表单，用户可以提交一些值，它们被存储在一个列表中，用逗号分隔，像这样:

<li>
    <span>
      Harvard,Marketing,2009,2014
    </span>
    <br><a>[Remove]</a>
    <br><a>[Edit]</a>
</li>
//output
Harvard,Marketing,2009,2014
[Remove]
[Edit]
  • 当点击[编辑]时，我想显示表单替换列表空间的值在跨度填充输入显示在新表单中，以便用户可以修改它们并再次保存。我怎样才能做到这一点呢?

jsFiddle上的完整代码: http://jsfiddle.net/YueX2/

请运行它，这样你就可以看到它是如何工作的，只需点击"添加另一个"，然后点击"保存"按钮。

有点乱，但应该给你一个如何做到这一点的想法。

对"li"的给定模板进行了稍微修改

<li>
    <span>
      Harvard,Marketing,2009,2014
    </span>
    <br><a href="#" class="remove">[Remove]</a>
    <br><a href="#" class="edit">[Edit]</a>
</li>

代码可以像这样:

$('.edit').click(function(){
    var parent = $(this).parent();
    //get the String from the span element
    var values = $.trim( parent.find('span').text() );
    //and plit them
    values = values.split(',');
    //prepend an container to hold the inputs
    parent.prepend('<div class="editCont"></div>');
    var container = parent.find('.editCont');
    //create inputs for each of the seperated values
    for(var v in values){
        container.append('<input type="text" value="'+values[v]+'" /><br>');
    }
    //create save link and bind click event to it
    container.append('<a href="#" class="editContButton" >save</a><br>');
    parent.find('.editContButton').click(function(){
        //collect all values from the inputs
        var text = [];
        var inputs = container.find('input');
        for(var i = 0; i < inputs.length; i++){
            text.push( $(inputs[i]).val() );
        }
        parent.find('span').show();
        //replace the text in the span element and remove container with inputs again
        parent.find('span').text( text.join(",") );
        container.remove();
    })
    parent.find('span').hide();
});

如果单击Edit, span中的文本将被分割，并为每个条目创建一个输入，并在最后添加一个保存链接。如果点击链接，输入将被连接到一个字符串中，并取代刷出中的旧文本。

spawn的隐藏和取消隐藏是可选的;)

单击edit时，可以拆分该span的内容，因为它已经用逗号分隔了。然后，您可以获取新的输入并在保存时将其应用于span。我编辑了你的编辑功能，增加了一个新的保存功能。

//existing edit method
$(document).on('click', '.edit', function () {
    //hides edit and remove buttons
    $(".removeParent, .edit").hide();
    //splits span into separate terms
    var terms = $(this).siblings("span").html().split(",");
    //makes new form
    $(this).parents("li").append("<input id='edit1' type='text' value=" + terms[0] + ">" + "<input id='edit2' type='text' value=" + terms[1] + ">" + "<input id='edit3' type='text' value=" + terms[2] + ">" + "<input id='edit4' type='text' value=" + terms[3] + "><input type='button' class='saveEdit' value='Save'>");
});
//additional save method 
$(document).on('click', '.saveEdit', function () {
    //unhides edit and remove buttons
    $(".removeParent, .edit").show();
    //makes the new string for the span
    var newString = $("#edit1").val()+","+$("#edit2").val()+"," +$("#edit3").val()+","+$("#edit4").val();
    //replaces the html of the span with the new string
    $(this).siblings("span").html(newString);
    //hides new form and save button
    $(this).hide(); 
    $("#edit1, #edit2, #edit3, #edit4").hide(); 
});
相关文章：