1. 程式人生 > >11月21日心得及筆記

11月21日心得及筆記

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