js控制html中ul列表li点击可以编辑

    

html:

<li onclick="Activity.changeValue(this)"  class="list-group-item btn btn-default" data-toggle="tooltip" data-placement="right"><span  onClick="Activity.deleteCaution(this);" class="badge badge-danger" style="cursor:pointer;margin-top:3px;background-color:red;">删除</span>'
                                    + caution
                                    + '</li>

js代码:

  changeValue : function(li)

        {
            var aaa = li.innerHTML;
            if(aaa.length<7){
                return false;
            }
            var oldval = aaa.substring(aaa.indexOf('</span>')+7,aaa.length);
            if(isEdit++ != 0)
            {
                return false;
            }
            var oldValue = oldval;
            li.innerHTML = "<input id='afocu' class='form-control' style='width:700px;border-style:none;' onblur='Activity.confirmChange(this)' value='"+oldValue+"'/>";
            $("#afocu").focus();
        },
        confirmChange :function(input)
        {
            input.parentNode.setAttribute('title',input.value);
            var ht = '<span onclick="Activity.deleteCaution(this);" class="badge badge-danger" style="cursor:pointer;margin-top:4px;background-color:red;">删除</span>';
            if(input.value==null||input.value==""){
                input.parentNode.remove();
                 isEdit = 0;
                return false;
            }
            var newValue =  ht+input.value;
            
            var li = input.parentNode;
            li.innerHTML = newValue;
            isEdit = 0;
        },    
        deleteCaution : function(o) {
            isEdit = -1;
            $(o).parent().remove();
        }

你可能感兴趣的:(js控制html中ul列表li点击可以编辑)