強力なJS、テーブルデータの削除を追加します.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>    </title>
	</head>
	<body>
		<center>
			<br><br>
			    :<br><br>
			  : <input type="text" name="name" id="name" />  
			email: <input type="text" name="email" id="email" />  
			  : <input type="text" name="tel" id="tel" /><br><br>
			<button id="addUser">  </button>
			<br><br>
			<hr>
			<br><br>
			<table id="usertable" border="1" cellpadding="5" cellspacing=0>
					<tr>
						<th>  </th>
						<th>email</th>
						<th>  </th>
						<th> </th>
					</tr>
					<tr>
						<td>Tom</td>
						<td>[email protected]</td>
						<td>5000</td>
						<td><a href="deleteEmp?id=Tom">Delete</a></td>
					</tr>
					<tr>
						<td>Jerry</td>
						<td>[email protected]</td>
						<td>8000</td>
						<td><a href="deleteEmp?id=Jerry">Delete</a></td>
					</tr>
	
			</table>
		</center>
	</body>
	<script language="JavaScript">
	   //                 
	   window.onload=function(){
	   	  document.getElementById("addUser").onclick = function(){
		 
		
/*********************************************************************************************************/	        
		   //      (  ,email,  )
		   /*
		    *     :<br><br>
			  : <input type="text" name="name" id="name" />  
			email: <input type="text" name="email" id="email" />  
			  : <input type="text" name="tel" id="tel" /><br><br>
		    */
		   var nameValue=document.getElementById("name").value;
		   var emailValue=document.getElementById("email").value;
		   var telValue=document.getElementById("tel").value;
/*********************************************************************************************************/		   
		   //        td
		   /*
		    * <tr>
						<td>Tom</td>
						<td>[email protected]</td>
						<td>5000</td>
						<td><a href="deleteEmp?id=Tom">Delete</a></td>
					</tr>
		    */
			  //<td></td>
		   var nameTdElement=document.createElement("td");
		     //Tom
		   var textNameELement=document.createTextNode(nameValue);
		   //<td>Tom</td>
		   nameTdElement.appendChild(textNameELement);
		   window.alert(nameTdElement.firstChild.nodeValue);
		   //#################################################################
		   
		   var emailTdElement=document.createElement("td");
		   var textEmailELement=document.createTextNode(emailValue);
		   emailTdElement.appendChild(textEmailELement);
		   //#################################################################
		   
		   var telTdElement=document.createElement("td");
		   var textTelELement=document.createTextNode(telValue);
		   telTdElement.appendChild(textTelELement);
		   //#################################################################
		  
		   //<td><a href="deleteEmp?id=Tom">Delete</a></td>
		   var aElement=document.createElement("a");
		   aElement.setAttribute("href","deleteEmp?id="+nameValue);
		   var deleteElement=document.createTextNode("Delete");
		   aElement.appendChild(deleteElement);
		   
		   var aTdElement=document.createElement("td");
		   aTdElement.appendChild(aElement);
		  
		   //#################################################################
/*********************************************************************************************************/			   
		   //  tr
		   var trElement=document.createElement("tr");
/*********************************************************************************************************/			   
		   //  td tr 
		   trElement.appendChild(nameTdElement);
		   trElement.appendChild(emailTdElement);
		   trElement.appendChild(telTdElement);
		   trElement.appendChild(aTdElement);
		   
/*********************************************************************************************************/			   
		   //  tbody
           var tbodyElement=document.createElement("tbody");

/*********************************************************************************************************/			   
		   //  tr tbody 
		   tbodyElement.appendChild(trElement);
/*********************************************************************************************************/	
          //  tbody table 
		  var tabElement=document.getElementById("usertable");		   
		  tabElement.appendChild(tbodyElement);
		   
/*********************************************************************************************************/
         //          
		 
		 aElement.onclick=function(){
		 	//      
		 	return deleteTr(aElement);
		 }

/*********************************************************************************************************/
	}  
}

/**
		 *   tr
		 * 
		 * @param {Object} aElement
		 */
		function deleteTr(aElement){
			   /*
				    * <tr>
								<td>Tom</td>
								<td>[email protected]</td>
								<td>5000</td>
								<td><a href="deleteEmp?id=Tom">Delete</a></td>
							</tr>
				    */
					var nameValue=aElement.parentNode.parentNode.firstChild.firstChild.nodeValue;
					//alert("nameValue  "+nameValue)
					var flag=window.confirm("      ["+nameValue+"]    ");
					//alert(flag);
					
					//  "  "    
					if(!flag){
						//      
						return false;
					}
					
					
					//  
					//       tr
					var trELement=aElement.parentNode.parentNode;
					
					//  tbody
					var tbodyELement=aElement.parentNode.parentNode.parentNode;
					
					//  
					tbodyELement.removeChild(trELement);
					
					
					//      
					return false;
		}

	</script>
</html>