js动态向页面中添加表格

最新推荐文章于 2022-09-13 20:22:09 发布

luanxiyuan

最新推荐文章于 2022-09-13 20:22:09 发布

阅读量398

点赞数

分类专栏：经(cǎi)验(kēng)总结文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/luanxiyuan/article/details/84434736

版权

经(cǎi)验(kēng)总结专栏收录该内容

251 篇文章 3 订阅

订阅专栏

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

luanxiyuan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js动态向页面中添加表格

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

扫一扫