11月21日心得及筆記
阿新 • • 發佈:2019-02-16
$(function(){
var $other=undefined;
var another=undefined;
attract();
function attract(){
$('li').click(function(){
$('li').css('background','pink');
$(this).css('background','red' );
//this.style.background="red";
$other=$(this);
another=this;
});
}
$('#btnAdd1').click(function(){
var input=window.prompt('新增資料');
$nweli=$('<li>' +input+'</li>');
$nweli.appendTo('#ol');
attract();
})
$('#btnDel1').click(function(){
$other.remove();
})
$('#btnInsert1').click(function(){
var input=window.prompt('插入資料');
var $newli=$('<li>'+input+'</li>');
$newli.insertBefore($other);
attract();
})
$('#btnEdit1').click(function(){
var oldvalue=$other.html();
var $str=$('<input type="text" value="'+oldvalue+'" />');
$other.html($str);
$str.focus();
$str.blur(function(){
var newvalue=$str.val();
$other.html(newvalue);
})
attract();
})
document.getElementById("btnAdd2").onclick=function (){
var input=window.prompt('輸入資料');
var newli=document.createElement('li');
newli.innerHTML=input;
document.getElementById("ol").append(newli);
attract();
}
document.getElementById("btnDel2").onclick=function (){
var str=another.parentNode;
str.removeChild(another);
}
document.getElementById("btnInsert2").onclick=function (){
var input=window.prompt('輸入資料');
var newli=document.createElement('li');
newli.innerHTML=input;
var ol=document.getElementById("ol");
ol.insertBefore(newli,another);
attract();
}
document.getElementById("btnEdit2").onclick=function (){
var oldvalue=another.innerHTML;
var str=document.createElement('input');
str='<input id="dl" type="text" value="'+oldvalue+'" />';
another.innerHTML=str;
document.getElementById("dl").focus();
document.getElementById("dl").onblur=function(){
var newvalue=document.getElementById("dl").value;
another.innerHTML=newvalue;}
}
});