<%--利用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动态填写table中的行和列(1.1)
最新推荐文章于 2022-04-07 15:19:53 发布