Caton + OO + Google =?: 心得 jquery 動態新增欄位

2011年7月4日星期一

心得 jquery 動態新增欄位

參考以下的來源利用 jquery 達成動態的新增移除 text欄位

以下是 code:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<title>Test Jquery dyamic</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.4.4");



function AddItem() {

document.getElementById('newitems').innerHTML +=

      "<div class=\"rowElem\" >"+
     "<label> ITEM ID: </label>"+
        "<input name=\"serid\" id=\"serid\" type=\"text\" maxlength=\"11\"/>"+
        "<input type=\"button\" value=\"add\"  onclick=\"AddItem()\" /> "+
        "<input type=\"button\" value=\"delete\" onclick=\"DeleteItem()\"/>"+
    "</div>";  
 
 
 
  // 先抓到是哪一個 tr
  var sids= $('input:button', '#reg');

  if(sids.length<4){
 var _count= sids.length-3;  
 sids.eq(_count).hide();  
  }
  else{
   var _count= sids.length-3;  
 sids.eq(_count-1).hide();
 sids.eq(_count).hide();   
  }


}


function DeleteItem() {

  // 先抓到是哪一個 tr
  var txts= $('input:text', '#reg');

  var _count= txts.length-1;
  // 移除它
  var rownow = txts.eq(_count).parent();
  rownow.remove();

    


    // BTN 顯示先前的
  var btns= $('input:button', '#reg');  

  var _bcount= btns.length-1;
 if(_bcount==0){
  btns.eq(_bcount).show();
 }
 else{ 
  btns.eq(_bcount-1).show();
  btns.eq(_bcount).show();
 }

}

function check(){

 var txts= $('input:text', '#reg');
 var _count= txts.length;
 var _str ="";
 for (var i=0;i< _count; i++){
_str = _str +i + ": " + txts.eq(i).val()+" ";
 }

 alert(_str);
}




</script>
</head>
<body>


 <div id ="fromBody" >
   <form id ="reg"  method="post" action="#" ">
     

    <div class="rowElem">
     <label> ITEM ID:  </label>
        <input name="serid" id="serid" type="text" maxlength="11"/>
        <input type="button" id="additem" value="add"  onclick="AddItem()" />               
    </div>

    <div id = "newitems">
 
    </div>
 
    <div class="rowElem">      
       <input type="submit"  value="Send" onclick="check()"/>           
    </div>
 
</form>


</body>
</html>