不用ajax也能實現的功能!單擊添加新行時可以刪除這一行信息的源碼

<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<html>
  <head>
    <title>動態生成HTML文檔</title>
     <script language="javascript">
       function testA(b){
     if(confirm("確定需要刪除本行信息嗎?")){
      var table = document.getElementById("test");
  table.deleteRow(b.rowIndex);
     }
   }
       function addRow(bumen,name,age,gender)
       {
           var students = document.getElementById("students");
           var row = document.createElement("tr");
    row.onclick=function() {testA(this);};
     var nameCell = document.createElement("td");
    nameCell.setAttribute("align","center");
    nameCell.setAttribute("bgcolor","#FFFFFF");
           nameCell.appendChild(document.createTextNode(bumen));
           row.appendChild(nameCell);
         
           var nameCell = document.createElement("td");
     nameCell.setAttribute("align","center");
      nameCell.setAttribute("bgcolor","#FFFFFF");
           nameCell.appendChild(document.createTextNode(name));
           row.appendChild(nameCell);
          
         
           var ageCell = document.createElement("td");
      ageCell.setAttribute("align","center");
    ageCell.setAttribute("bgcolor","#FFFFFF");
           ageCell.appendChild(document.createTextNode(age));
           row.appendChild(ageCell);
    
      var ageCell = document.createElement("td");
    ageCell.setAttribute("align","center");
    ageCell.setAttribute("bgcolor","#FFFFFF");
           ageCell.appendChild(document.createTextNode(gender));
           row.appendChild(ageCell);
          
           //把行記錄附加到表格中
           students.appendChild(row);
          
          
       }
      //發送客戶端的請求
   
       //添加一條學生記錄
       function add()
       {
     
           var name = document.getElementById("personnel").value;
     var bumen = document.getElementById("bumen").value;
           var age = document.getElementById("logic").value;
           var gender = document.getElementById("banci").value;
          addRow(bumen,name,age,gender);
       }
     </script>
  </head>
  <body>
     <table width="100%" border="0" cellspacing="0" cellpadding="0">
 
   
   <tr>
    <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
  
      
    
      <tr> 
 
        <td>
  
  <table width="100%" border="0" cellpadding="0" cellspacing="1">
          <tr align="center">
    <td width="20%" align="right">
   部門:    </td>
    <td width="28%" align="left">
  
        <select name="bumen">
     <option value="-1" selected="selected">請選擇</option>
        <option value="人事部">人事部</option>
     <option value="生產部">生產部</option>
     <option value="安檢部">安檢部</option>
          </select>
     
    
    </td>
      <td width="20%" align="right">
    人員(組):    </td>
    <td width="28%" align="left">
  
        <select name="personnel">
     <option value="-1" selected="selected">請選擇</option>
        <option value="班主任">班主任</option>
     <option value="王召">王召</option>
     <option value="王偉">王偉</option>
          </select>
     
    
    </td>
          </tr>
          <tr align="center">  
   
     <td width="14%" align="right">
   循環類型:    </td>
    <td width="38%" align="left">
        <select name="logic" onChange="openW(this)">
     <option value="-1" selected="selected">請選擇</option>
     <option value="天">天</option>
        <option value="周">周</option>
     <option value="月">月</option>
          </select>
       
    </td>
      <td align="right">
    班次:
    </td>
    <td align="left">
        <select name="banci" >
       <option value="-1" selected="selected">請選擇</option>
   
        <option value="早班">早班</option>
     <option value="晚班">晚班</option>
          </select>
    </td>
          </tr>
        </table>
  </td>
        <td width="8">  </td>
      </tr>
    </table></td>
  </tr>
   <tr>
    <td height="35">
 
        <table align="right" width="100%">
    <tr>
      <td align="right"><input type="button" value="添加" onClick="add()"/></td>
  
    </tr>
  </table>
 </td>
  </tr>
    
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="30">
 
 <table width="100%" id="test" border="0" cellpadding="0" cellspacing="1" bordercolor="#B2B4BF"  bgcolor="b5d6e6" onMouseOver="changeto()"  onmouseout="changeback()">
       
       <tbody id="students" bgcolor="#FFFFFF">
          <tr>
     <td width="3%" height="22"><div align="center"><span class="STYLE1">部門</span></div></td>
            <td width="3%" height="22" ><div align="center"><span class="STYLE1">人員(組)</span></div></td>
            <td width="3%" bgcolor="#FFFFFF"><div align="center">循環類型</div></td>
          
            <td width="3%" height="22" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">班次</span></div></td>
   
          </tr>  
   
 </tbody>


 </table>
 </td>
 </tr></table>
  </font>
  </body>
</html>

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