AJAX 動態新增控制項

<HTML>
<HEAD><TITLE></TITLE></HEAD>
<BODY>

<script>
  function insertComp(){
     var str="<br><input type=’text’ name=’t1′><input type=’checkbox’ name=’c1′ value=’ca1′><input type=’radio’ name=’r1′ value=’rr1′><input type=’radio’ name=’r1′ value=’rr2′><input type=’radio’ name=’r1′ value=’rr3′>";
     document.getElementById("insertDIV").insertAdjacentHTML("afterBegin",str);
  }

  function insTable(tbid){
    var str="<tr><td><input type=’text’ name=’t1′></td><td><input type=’checkbox’ name=’c1′ value=’ca1′></td><td><input type=’radio’ name=’r1′ value=’rr1′><input type=’radio’ name=’r1′ value=’rr2′><input type=’radio’ name=’r1′ value=’rr3′></td></tr>";
    var tb=document.getElementById(tbid);
     var o=document.createElement("div"),ol;
     o.innerHTML="<table>"+str+"</table>";
     ol=o.childNodes[0].tBodies[0].rows;
     while(ol.length>0){
        tb.tBodies[0].appendChild(ol[0]);
     }
  }
 
  function insTable1(tbid,trid){
    var tb=document.getElementById(tbid);
    var tr=document.getElementById(trid);
     var o=document.createElement("div"),ol;
     o.innerHTML="<table><tr id=’tr"+trid+"’>"+tr.innerHTML+"</tr></table>";
     ol=o.childNodes[0].tBodies[0].rows;    
     while(ol.length>0){
        tb.tBodies[0].appendChild(ol[0]);
     }
  }
 
</script>

<form method="POST" action="showparam">
  <table>
   <tr><td>
      <table id="tb1" border="1" width="100">
         <tr id="tr0"><td>0</td><td><input type=’text’ name=’t1′></td><td><input type=’button’ value=’Insert Row 0′ onClick="insTable1(‘tb1′,’tr0’)"/></td></tr>
         <tr id="tr1"><td>1</td><td><input type=’text’ name=’t1′></td><td><input type=’button’ value=’Insert Row 1′ onClick="insTable1(‘tb1′,’tr1’)"/></td></tr>
         <tr id="tr2"><td>2</td><td><input type=’text’ name=’t1′></td><td><input type=’button’ value=’Insert Row 2′ onClick="insTable1(‘tb1′,’tr2’)"/></td></tr>
         <tr id="tr3"><td>3</td><td><input type=’text’ name=’t1′></td><td><input type=’button’ value=’Insert Row 3′ onClick="insTable1(‘tb1′,’tr3’)"/></td></tr>
      </table>
    </td></tr>
    <tr><td><input type=’button’ value=’Insert’ onclick="insTable(‘tb1’);"/></td></tr>
  </table>

  <div id=’insertDIV’></div>
  <input type=’button’ value=’No Use for Firefox’ onclick="insertComp();"/><br/>
  <input type=’submit’ />
</form>
<script defer type="text/javascript">//<![CDATA[
     insertComp();
//]]></script>
</BODY>
</HTML>

廣告

About fenjj

Perfect !!??...
本篇發表於 Uncategorized。將永久鏈結加入書籤。

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s