js动态向页面中添加表格

luanxiyuan

浏览: 1049527 次
性别:
来自: 大连

最近访客更多访客>>

yangyawei2013

kxlele

u012363178

malinhuan123

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Web开发
页面相关

[size=xx-large][size=large]我们在实际开发中经常会想要实现如下情况：
点击某个按钮，然后动态的网页面里面添加一个表格或者一行，这个更加灵活方便。但是实现起来肯定不能像在页面里面直接写标签来的容易，以下是我项目中的代码，拿过来分享：

<html>
<head>
<script type="text/javascript">
	var i = 0;
	function deleteTable(myNode) {
		i --;
		document.getElementById('table1').removeChild(myNode.parentNode.parentNode.parentNode.parentNode);
	}
	
	function createImageTable() {
		i++;
		if(i > 1) {
			i --;
			alert("每次只允许添加1道问题");
		} else {
			var t = document.createElement('table');
			//动态添加第一行
			var tr1 = t.insertRow(-1);
			var td11 = tr1.insertCell(-1);
			td11.align="right";
			td11.width="180";
			var td12 = tr1.insertCell(-1);
			//设置内容和属性    
			td11.innerHTML = "题目 :";
			td12.innerHTML = "<input type='text' name='textTitle' id='textTitle' /><input type='hidden' name='quesLeixing' value='image' id='quesLeixing'/>         <input type=button value='删除该题' onclick='deleteTable(this)'/>";
			//动态添加第二行
			var tr1 = t.insertRow(-1);
			var td11 = tr1.insertCell(-1);
			td11.align="right";
			td11.width="180";
			var td12 = tr1.insertCell(-1);
			//设置内容和属性    
			td11.innerHTML = "添加图片文件 :";
			td12.innerHTML = "<input type='file' name='myFile' id='imageFile' />";
			//添加第三行
			var tr2 = t.insertRow(-1);
			var td11 = tr2.insertCell(-1);
			td11.align="right";
			var td12 = tr2.insertCell(-1);
			//设置内容和属性    
			td11.innerHTML = "试题类型 :";
			td12.innerHTML = "<input type='radio' name='textQuesType' value='single' checked='checked'/>单选题      <input type=radio name='textQuesType' value='multiple'/>多选题";
			//添加第四行
			var tr3 = t.insertRow(-1);
			var td31 = tr3.insertCell(-1);
			td31.align="right";
			var td32 = tr3.insertCell(-1);
			//设置内容和属性    
			td31.innerHTML = "选项1 :";
			td32.innerHTML = "<input type='text' name='textOption[0].optionName' id='textOption[0].optionName' />是否是正确答案：<input type='checkbox' name='answer' value='0'/>";
			//添加第五行
			var tr3 = t.insertRow(-1);
			var td31 = tr3.insertCell(-1);
			td31.align="right";
			var td32 = tr3.insertCell(-1);
			//设置内容和属性    
			td31.innerHTML = "选项2 :";
			td32.innerHTML = "<input type='text' name='textOption[1].optionName' id='textOption[1].optionName' />是否是正确答案：<input type='checkbox' name='answer' value='1' />";
			//添加第六行
			var tr3 = t.insertRow(-1);
			var td31 = tr3.insertCell(-1);
			td31.align="right";
			var td32 = tr3.insertCell(-1);
			//设置内容和属性    
			td31.innerHTML = "选项3 :";
			td32.innerHTML = "<input type='text' name='textOption[2].optionName' id='textOption[2].optionName' />是否是正确答案：<input type='checkbox' name='answer' value='2' />";
			//添加第七行
			var tr3 = t.insertRow(-1);
			var td31 = tr3.insertCell(-1);
			td31.align="right";
			var td32 = tr3.insertCell(-1);
			//设置内容和属性    
			td31.innerHTML = "选项4 :";
			td32.innerHTML = "<input type='text' name='textOption[3].optionName' id='textOption[3].optionName' />是否是正确答案：<input type='checkbox' name='answer' value='3' />";
			//添加第八行
			var tr3 = t.insertRow(-1);
			var td31 = tr3.insertCell(-1);
			td31.align="right";
			var td32 = tr3.insertCell(-1);
			//设置内容和属性    
			td31.innerHTML = "选项5 :";
			td32.innerHTML = "<input type='text' name='textOption[4].optionName' id='textOption[4].optionName' />是否是正确答案：<input type='checkbox' name='answer' value='4' />";
			t.setAttribute("frame", "below");
			t.setAttribute("width", "676");
			//t.setAttribute("border", "1");
			t.setAttribute("bordercolor", "#818181");
			document.getElementById('table1').appendChild(t);
		}
	}
</script>

</head>
<body>
				<font color="#B3171C" size="5">添加测评问题</font><p/>
				<table width="677" border="0" id="quesTable">
					<tbody>
						<tr>
							<td colspan="3" align="center">选择添加试题类型：
							<input type="button" name="addtext" value="图片类型" onclick="createImageTable()" /> 
							</td>
						</tr>
					</tbody>
				</table>

		</form>
	</div>
</body>
</html>

我是在页面里面有一个div，点击按钮之后，通过document.createElement('table');方法创建一个table，再通过insertRow(-1);和insertCell(-1);方法向表格中增加行和列，注意括号里面要有-1，否则在firefox里面没问题，放在chrome里面就有问题了，是因为firefox是自动添加到最后一行，而chrome是默认是添加到上面一行，所以通过-1指定添加到的是最下面的一行；然后再通过document.getElementById('table1').appendChild(t);来把生成的table放到页面的<div>标签里面。在删除的时候直接通过document.getElementById('table1').removeChild(myNode.parentNode.parentNode.parentNode.parentNode);方法就可以了。

0
顶

0
踩

分享到：

SpringMVC报错The request sent by the cl ... | 锚点快速定位到页面中指定位置

2013-05-23 17:59
浏览 6859
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

实验室管理系统微信小程序+SSM毕业设计源码+数据库+论文+启动教程.zip: 实验室管理系统微信小程序+SSM毕业设计源码+数据库+论文+启动教程项目启动教程：https://www.bilibili.com/video/BV1BfB2YYEnS

基于java的苹果网吧计费管理系统设计与实现.docx: 基于java的苹果网吧计费管理系统设计与实现.docx

纸中世界-跳跃游戏.sb3: 纸中世界-跳跃游戏.sb3

Keysight 网络分析仪新建校准件操作指导: 本操作指导用于在 ENA 系列网络分析仪 E5080B 上自定义校准件。目前 Keysight 网络分析仪的 PNA 系列 N52xxB、P50xx 系列、P937x 系列、PXI 板卡式网分以及 ENA 系列的 E5080B、E5081B 的操作界面均统一到如下界面，操作方式相同。

调查海域浮游动物各类群栖息密度的空间分布表格.docx: 调查海域浮游动物各类群栖息密度的空间分布表格.docx

ssm框架Java项目源码-高校毕业生就业管理系统+jsp毕设-大作业.zip: 本项目“高校毕业生就业管理系统”是一套基于SSM框架（Spring+SpringMVC+MyBatis）精心开发的Java Web应用，旨在为高校毕业生、高校就业指导部门以及企业用户提供一个高效、便捷的就业信息管理平台。系统主要功能包括：学生用户可以查看和发布个人简历，搜索并筛选合适的工作岗位，申请心仪的职位；企业用户可以发布招聘信息，筛选和查看应聘者的简历，进行面试邀请等操作；高校就业指导部门则可以对学生的就业情况进行统计和分析，以更好地提供就业指导服务。此外，系统采用了B/S架构，用户只需通过浏览器即可访问，无需安装客户端软件，方便快捷。数据库设计合理，数据存储安全，系统性能稳定。本项目的开发，不仅为计算机相关专业的学生提供了一个实践SSM框架的好机会，帮助他们更好地理解和掌握Java Web开发技术，还能有效提升高校毕业生的就业效率和质量。

使用 Python 进行视频编辑.zip: 电影剪辑笔记MoviePy 最近升级到 v2.0，引入了重大的重大变化。有关如何更新 v2.0 代码的更多信息，请参阅本指南。MoviePy（在线文档在此处）是一个用于视频编辑的 Python 库剪切、连接、插入标题、视频合成（又名非线性编辑）、视频处理和创建自定义效果。MoviePy 可以读取和写入所有最常见的音频和视频格式，包括 GIF，并且可以在 Windows/Mac/Linux 上运行，并搭载 Python 3.9+。例子在此示例中，我们打开一个视频文件，选择 10 到 20 秒之间的子剪辑，在屏幕中心添加标题，然后将结果写入新文件# Import everything needed to edit video clipsfrom moviepy import *# Load file example.mp4 and keep only the subclip from 00:00:10 to 00:00:20clip = VideoFileClip("long_examples/example2.mp4").with_subcl

基于java的视频播放器系统设计与实现.docx: 基于java的视频播放器系统设计与实现.docx

基于java的车辆出租管理系统设计与实现.docx: 基于java的车辆出租管理系统设计与实现.docx

mqtt等协议的pcap文件: mqtt等协议的pcap文件

小白的Python入门教程部分章节源码.zip: 学习python

修木工施工规范及流程.docx: 修木工施工规范及流程.docx

适用于 Windows,Linux 和 Python 3 (3.5,3.6,3.7) 的 Tensorflow Faster R-CNN.zip: 适用于 Windows/Linux 和 Python 3 (3.5/3.6/3.7) 的 Tensorflow Faster R-CNNtf-faster-rcnn使用 Python 3 在 Windows 和 Linux 上使用 Tensorflow Faster R-CNN这是在 Windows 和 Linux 上编译 Faster R-CNN 的分支。它深受这里和这里的出色工作的启发。目前，此存储库支持 Python 3.5、3.6 和 3.7。感谢@morpheusthewhite请注意我没有时间或意图修复此分支的所有问题，因为我不将其用于商业用途。我创建此分支只是为了好玩。如果您想做出任何承诺，我们非常欢迎。Tensorflow 已经发布了一个对象检测 API。请参考它。https: //github.com/tensorflow/models/tree/master/research/object_detection如何使用此分支安装 tensorflow，最好是 GPU 版本。按照说明操作。如果没有安装 GPU 版本，则需要注释掉代码中的所有 GP

章节2：编程基本概念之python程序的构成: Python是一种高级、解释型、面向对象的编程语言，以其简洁的语法、强大的功能和广泛的应用领域而著称。它无需事先编译，代码在运行时逐行解释执行，提供了极大的灵活性和快速开发的能力。Python支持多种数据类型，包括整数、浮点数、字符串、布尔值、列表、元组、字典和集合等，以及丰富的操作符和流程控制结构，使得开发者可以编写出复杂且灵活的代码。 Python拥有一个广泛的标准库，涵盖了文件操作、网络通信、文本处理、正则表达式、数学运算等多个领域，为开发者提供了大量的模块和函数。此外，Python还拥有丰富的第三方库，如NumPy、Pandas、Matplotlib等用于数据分析和可视化的库，以及Django、Flask等用于Web开发的框架，这些库和框架进一步扩展了Python的应用领域和功能。 Python在Web开发、数据科学、人工智能、自动化运维和游戏开发等多个领域都有广泛的应用。在Web开发方面，Python提供了Django和Flask等强大的Web框架，使得开发者可以轻松地开发出各种Web应用和网站。在数据科学领域，Python是数据科学家的首选工具，其强大的数据处理能力和丰

毕设源码-基于python的西西家居全屋定制系统的设计与实现_ijsj--论文-期末大作业+说明文档.rar: 本项目是基于Python语言开发的西西家居全屋定制系统，旨在为家居行业提供一个高效、智能的定制解决方案。项目涵盖了从客户需求分析、设计方案生成、材料选购到最终订单生成的全过程，力求实现家居定制的数字化和智能化。在主要功能方面，系统具备强大的客户管理模块，能够详细记录和分析客户的定制需求。设计模块则采用先进的三维建模技术，为客户提供直观、真实的家居设计方案预览。此外，系统还整合了丰富的材料数据库，方便客户根据自身喜好和预算进行材料选择。框架方面，项目采用了B/S架构，确保了系统的稳定性和可扩展性。后端使用Python的Django框架，前端则结合了HTML、CSS和JavaScript等技术，实现了用户界面的友好和响应速度。开发此项目的目的，不仅是为了满足家居行业对个性化定制的需求，也为计算机相关专业的学生提供了一个实践和学习的平台，有助于提升他们的实际开发能力。

简单连接到 Binance Public API.zip: Binance公共API连接器Python 这是一个轻量级库，可作为Binance 公共 API的连接器支持的 API/api/*/sapi/*现货 Websocket 市场动态现货用户数据流现货 WebSocket API包含测试用例和示例可定制的基本 URL、请求超时和 HTTP 代理可以显示响应元数据安装pip install binance-connector文档https://binance-connector.readthedocs.ioRESTful API使用示例from binance.spot import Spotclient = Spot()# Get server timestampprint(client.time())# Get klines of BTCUSDT at 1m intervalprint(client.klines("BTCUSDT", "1m"))# Get last 10 klines of BNBUSDT at 1h intervalprint(client.k

离线安装eclipse的aptana插件详细中文最新版本: Aptana是一个非常强大,开源,JavaScript-focused的AJAX开发IDE。 Aptana的特点包括： 1JavaScript,HTML,CSS语言的Code Assist功能。 2Outliner(大纲)：显示JavaScript,HTML和CSS的代码结构。

学习自律养成小程序微信小程序+SSM毕业设计源码+数据库+论文+启动教程.zip: 学习自律养成小程序微信小程序+SSM毕业设计源码+数据库+论文+启动教程项目启动教程：https://www.bilibili.com/video/BV1BfB2YYEnS

认知能力评估表.docx: 认知能力评估表.docx

数学建模学习资料粒子群算法先进算法讲义.pdf: 数学建模学习资料粒子群算法先进算法讲义.pdf

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论