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

最新推荐文章于 2018-10-12 18:07:13 发布

AngelCathy

最新推荐文章于 2018-10-12 18:07:13 发布

阅读量337

点赞数

文章标签： JavaScript Java JSP Firefox HTML ViewUI

本文介绍了一种使用JavaScript为HTML表格动态添加行和列的方法。通过点击按钮即可新增一行，并预填充输入框内容，适用于创建灵活的数据录入界面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >



<%--利用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>