`

js动态向页面中添加表格

 
阅读更多
[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
踩
分享到：
| 锚点快速定位到页面中指定位置
评论
发表评论

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

相关推荐

    javascript动态添加表格数据行

    在JavaScript编程中，动态添加表格数据行是一种常见的需求，特别是在构建交互式的Web应用程序时。这个功能允许用户在不刷新整个页面的情况下添加新的记录，提高了用户体验。在这个例子中，我们将探讨如何利用...

    javascript动态向网页中添加表格实现代码.docx

    ### JavaScript 动态向网页中添加表格实现代码详解 #### 一、背景介绍 在Web开发中，经常需要根据后台返回的数据动态生成HTML元素。其中，动态生成表格是一种常见的需求，尤其是在展示数据列表时。本篇文章将详细...

    动态添加Table表格

    `WebCalendar.js`可能是用于处理日期选择或日历功能的JavaScript文件，但与动态表格的创建直接关系不大。`fp.sql`可能是数据库脚本，用于创建或填充数据。`App_Code`目录通常用于存放自定义的类库代码，而`App_Data`...

    动态插入、添加删除表格行的JS代码

    ### 动态插入、添加删除表格行的JS代码 在网页开发中，表格是一个非常重要的元素，用于展示数据。为了使网页更具交互性，我们常常需要动态地对表格进行操作，比如插入或删除行等。本文将通过一个具体的示例来讲解...

    JavaScript动态添加删除表格行

    1. **添加表格行**： 要动态添加一行，首先需要获取到表格的引用，通常是通过`document.getElementById`或`document.querySelector`来实现。然后，创建一个新的`&lt;tr&gt;`元素，并为它添加需要的`&lt;td&gt;`子元素。最后，...

    JavaScript中动态向表格添加数据

    在JavaScript中，动态向表格添加数据是一项常见的任务，特别是在网页交互和数据展示时。这个过程涉及到HTML、CSS以及JavaScript的基本操作，尤其是DOM（文档对象模型）的操作。以下是对标题和描述中所涉及知识点的...

    JAVASCRIPT自动添加表格

    首先，让我们来理解“JavaScript自动添加表格”。在HTML中，表格由`&lt;table&gt;`元素定义，行(`&lt;tr&gt;`)、列(`&lt;td&gt;`或`&lt;th&gt;`)以及表头(`&lt;thead&gt;`)和表体(`&lt;tbody&gt;`)等组成。在JavaScript中，我们可以利用DOM（Document ...

    js生成动态表格并为每个单元格添加单击事件的方法

    本文所探讨的方法主要涉及使用JavaScript动态创建表格，并为表格中的每一个单元格添加点击事件处理函数，实现点击单元格时能够弹出单元格内容并改变单元格背景颜色的效果。下面详细地对标题、描述和给出的部分内容...

    JavaScript 动态表格

    用JavaScript制作的动态表格，有添加、删除、全选、全不选，有对动态新增的域校验问题，有对新增的域设置readonly问题，还有对新增域中的span进行隐藏问题都有解决，还有对动态表格的讲解PPT一份。

    js动态添加删除表格

    在JavaScript（JS）中，动态添加和删除表格是常见的任务，尤其在开发交互式Web应用时。这涉及到了DOM（Document Object Model）操作，因为HTML表格实际上是由一系列DOM元素组成的。下面将详细介绍如何使用JavaScript...

    javascript动态向网页中添加表格实现代码

    利用JavaScript来实现动态添加表格的功能，能够有效地提高页面的交互性和用户体验。本文将详细介绍如何使用JavaScript将JSON数组转换为网页中的表格，并且提供了一份可以在主流浏览器中运行的代码示例。 知识点一：...

    js动态的添加元素例如表格1

    在JavaScript中，动态添加元素是指通过编程方式在网页中添加新的HTML元素，例如添加表格、列表、按钮等。这种技术广泛应用于Web开发中，例如在 Ajax 应用程序中，为了提供实时的数据更新，或者在单页应用程序中，为...

    JQuery_可拖曳动态添加表格、动态排序

    动态添加表格是指在页面加载后，用户可以动态添加新的表格行。我们可以使用 JQuery 的 append 方法来实现这个功能。首先，我们需要创建一个按钮来触发添加新的表格行的事件，然后使用 append 方法将新的表格行添加到...

    JS动态增加删除表格行

    在JavaScript（JS）编程中，动态管理HTML元素是常见的需求，特别是对于表格（Table）这样的数据展示组件。本文将深入探讨如何使用JavaScript动态地增加和删除表格行。 首先，我们来了解一下HTML表格的基本结构。一...

    动态新增表格一行HTML页面源代码

    动态新增表格一行HTML页面源代码，用js实现的。

    JS动态添加tr

    在JavaScript中，我们可以通过DOM（Document Object Model）操作来动态地向表格中添加新的行。以下是一个基本的示例： ```javascript // 获取表格元素 var table = document.getElementById('myTable'); // 创建新...

    原生js可编辑表格实现动态添加表格行数和删除表格行数

    在JavaScript（JS）中，创建一个可编辑的表格并实现动态添加和删除行的功能是一项常见的需求，尤其是在构建数据管理界面时。以下将详细介绍如何利用原生JavaScript实现这一功能。 首先，我们需要在HTML中创建一个...

    动态添加/删除表格行并提交内容到后台

    这个`submitData`函数会收集表格中的数据，然后使用AJAX向`/Controller/SaveData`发送POST请求。请注意，你需要根据实际的控制器和路由配置调整URL。 总结起来，实现动态添加/删除表格行并提交内容到后台的过程涉及...

    js 添加删除表格

    在JavaScript（JS）中添加和删除表格是网页动态交互中常见的功能，这通常涉及到DOM（文档对象模型）操作。这篇博客“js 添加删除表格”可能讲述了如何使用JS来动态地创建、修改和移除HTML表格元素。下面我们将深入...

    javascript实现表格添加删除等操作

    4. **数据管理**：如果表格数据存储在JavaScript数组中，那么在添加、删除或编辑行时，也应同步更新数组。这有助于保持数据的一致性，并可能用于其他操作，如排序或过滤。 5. **模板字符串**：在创建新的HTML元素时...

Magicbox
Global site tag (gtag.js) - Google Analytics