<%--利用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>
分享到：
相关推荐
9.9 JavaScript遍历table的行和列 9.10 表格按回车自动生成新行 9.11 单击单元格背景变色 9.12 单击表格某行后其他行隐藏 9.13 单击表头实现表格排序 9.14 单击单元格显示行的详细信息 9.15 表格设置为“100%”时...
9.9 JavaScript遍历table的行和列 9.10 表格按回车自动生成新行 9.11 单击单元格背景变色 9.12 单击表格某行后其他行隐藏 9.13 单击表头实现表格排序 9.14 单击单元格显示行的详细信息 9.15 表格设置为“100%”时...
- **实例014 使用Table进行多列记录展示**：展示了如何使用`<table>`标签来构建表格，以便更好地组织和显示数据。 - **实例015 使用Table结合DataList构建员工信息列表**：演示了如何结合`<table>`和`<datalist>`...
- **条件设置向导**：允许用户逐步填写表单信息，每一步完成后动态加载下一步的信息。 - **页面关键词提示**：在用户输入搜索关键词的过程中，实时显示可能匹配的结果。 #### 四、总结 通过以上案例的讲解，我们...
- `function chkinput(f) {...}`：该函数用于检查表单中的`name`和`tiaojian`字段是否已填写。 - `function chkinput2(f) {...}`：该函数用于验证用户输入的用户名、密码以及邮箱后缀是否为空。 - `function MM_...
#### 1.1 问题描述 - **背景**：随着信息技术的发展，人们越来越倾向于在线记录个人信息和心情。因此，开发一款方便使用的网络日记本变得十分必要。 - **目标**：开发一个支持日记增删改功能的网络日记本系统。此外...
在Node.js环境中，npm（Node Package Manager）是用于管理和安装Node.js包的重要工具。为了实现神通数据库的连接，需要安装`node-odbc`这个全局变量模块。 ```sh npm install odbc -g ``` **2.2 查看全局变量模块**...
ADO是一种独立于ASP之外的对象，提供了简单易用且具有扩展性的方法来连接、操作和查询数据库，同时能够将数据库中的数据无缝集成到Web页面中。本文将围绕ADO的核心概念展开，并通过示例演示其实际应用场景。 #### ...
v=1.1"> <script src="/scripts/pub_topnav_2011.js"type="text/javascript"> #sp_ali { font-size:14px; color:#555; font-size:12px; } #sp_ali b { padding-right:10px; font-size:14px; font-family:...
在系统设计和开发过程中，要充分考虑系统当前和将来可能承受的工作量，使系统的处理能力和响应时间能够满足信息处理的需求。 2、 系统的开放性和系统的可扩充性：系统在开发过程中，应该充分考虑以后的可扩充性。...
<script language="javascript" for="document" event="onkeydown"> if(event.keyCode==13 && event.srcElement.type!='button' && event.srcElement.type!='submit' && event.srcElement.type!='reset' && event....
使用import指令导入库到模板中，Freemarker会为导入的库创建新的名字空间，并可以通过import指令中指定的散列变量访问库中的变量： ${my.mail} ${mail} 输出结果： <p>Copyright (C) 1999-2002 ...