jQuery:提交后使动态内容可编辑

时间:2014-05-04 17:56:00

标签: javascript jquery forms dynamic

我有一个表单,用户可以提交一些值,然后将它们存储在以逗号分隔的范围内的列表中,如下所示:

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

请运行它以便查看其工作原理,只需点击“添加其他”,然后点击“保存”按钮。

2 个答案:

答案 0 :(得分:1)

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

//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(); 
});

答案 1 :(得分:1)

有点乱,但应该让你知道如何做到这一点。

&#34; li&#34;的给定模板略有修改

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

如果单击“编辑”,则会分割跨区中的文本,并创建每个条目的输入,最后添加一个保存链接。 如果链接被klicked,则输入将加入sting并替换spawn中的旧文本。

生成的隐藏和取消隐藏是可选的;)