javascsript 動態的添加和刪除。

<!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=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var j_1 = 1;
function add_row(){
  newRow =document.all.row.insertRow(-1);
  newCell =newRow.insertCell();
  newCell.className="STYLE3";
  newCell.align="center";
  newCell.innerHTML="<select name='thesistogether"+j_1+"'>"+
            "<option value='請選擇'>"+
            "請選擇"+
            "</option>"+
            "<option value='1'>"+
            "1111"+
            "</option>"+
            "<option value='2'>"+
            "2222"+
            "</option>"+
            "<option value='3'>"+
            "3333"+
            "</option>"+
            "<option value='4'>"+
            "44444"+
            "</option>"+
            "</select>";
for(var i=0;i<10;i++){
        newCell=newRow.insertCell();
         newCell.className="STYLE3";
        newCell.align="center";
        newCell.innerHTML="<input type='text' name='familyrelation"+j_1+"' style='WIDTH: 60px; font-size:9pt; color:#000000' />";
    } 

       newCell=newRow.insertCell();
       newCell.className="STYLE3";
       newCell.align="center";


       newCell.innerHTML="<input type='button' value='刪除' onClick='deleteRow();'>";
       j_1++;
       document.all.row.focus();
}

//刪除當前行。
function deleteRow(){
        var cuerrentRowIndex = event.srcElement.parentNode.parentNode.RowIndex;
        document.all.row.deleteRow(cuerrentRowIndex);
}


</script>
</head>
<body bgcolor="#F5F1F5">
   <form action="#" id="f" name="fo">
    <table border="2" bordercolor="23">
          <tr>
              <td align="right">
                 <input type="button" name="bt" οnclick="add_row();" value="添加">
              </td>
         </tr>
         <tr>
          <td>
           <table id="row" style="widht:100%" border="1" cellpadding="2" cellspacing="1">
                 <tr>
                   <td></td>
                 </tr>                           
           </table>
          </td>
         </tr>
    </table>
</form>
</body>
</html>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章