javascript动态填写table中的行和列(1.1)


<%--利用javascript实现table动态添加行和列  --%>

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My JSP 'drawTable.jsp' starting page</title>
  </head>
  
  <body>
  	<br/><br/><br/>
  	<div align="center">
  		<font color="blue">用javascript画出表格中的行</font>
  		<br/>
  	    <br/>
  		 <input type="button" name="addItems" id="addItems" value="添加条目" onClick="addItem()"/>
  	</div>
  	<br/>
  	<br/>
  	
	<table border="1"  align="center" id="drawTable" width="100">
	    <script type="text/javascript">
	    	function addItem(){
	    	
	    		var rowID = drawTable.rows.length;//table显示的列的
				var tr1 = drawTable.insertRow(rowID);//在table显示列的后面再添加一行	
				tr1.align = "center";					
			
				var td1 = tr1.insertCell();			
				td1.innerHTML =  '<input type="text" name="aaa" id="aaa" value="11">';  
				
				
				var td2 = tr1.insertCell();	
				td2.innerHTML = '<input type="text" name="bbb" id="bbb" value="22" >';
				
				var td3 = tr1.insertCell();
				td3.innerHTML = '<input type="text" name="ccc" id="ccc" value="33">';

				var td4 = tr1.insertCell();
				td4.innerHTML = '<input type="text" name="dddd" id="dddd" value="这是第四个了"/>';
				
				var td5 = tr1.insertCell();
				td5.innerHTML = '<input type="text" name="eeee" id="eeee" value="这是第五个了"/>';
					
	    	}
	    	
	    </script>
    </table>
  </body>
</html>

你可能感兴趣的:(JavaScript,java,html,jsp,firefox)