js动态控制表单表格

时间 2019-11-20

原文原文链接

js动态控制表单表格，这里操做只讲，添加一行，删除一行，删除某一行某一列。javascript

直接放代码：html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<table id="tabl" border=1 cellpadding=10 cellspacing=0>
			<thead bgcolor="#00B3FF">
				<tr>
					<td>姓名</td>
					<td>联系方式</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>孟小伟</td>
					<td>686898</td>
				</tr>
				<tr>
					<td>静妹妹</td>
					<td>686898</td>
				</tr>
				<tr>
					<td>臭猪 </td>
					<td>686898</td>
				</tr>
			</tbody>
		</table>
		<!--表单基础特别举例-->
		<form>                        <!--这里有个有趣的东西，for=“cao” ,而后后面的<input />添加id为cao，你点击这里的文字，会在input直接提示你输入-->
			<p><label for="cao">名字是什么，点击我就能够到框框里面：</label><input type="text" id="cao" /></p>
		</form>
		<script>
			window.onload = function() {
				/*建立一行，执行chuang()函数*/
				chuang();
				/*删除一行，或者某一行一列,执行dete函数*/
                                dete();
				function chuang() {
					var tab = document.getElementById("tabl");/*取到要操做的对象*/
					var tr = tab.insertRow(2);/*给其添加序号为2的行*/
					var Ptext = new Array();/*建立文本节点组数*/
					Ptext[0] = document.createTextNode("黑猪");
					Ptext[1] = document.createTextNode("998342");
					for(var i = 0; i < Ptext.length; i++) {/*遍历*/
						var cd = tr.insertCell(i);/*按序号建立列*/
						cd.appendChild(Ptext[i]);/*把文本节点添加到对应的列*/
					}
				} 
				function dete(){
					var tab = document.getElementById("tabl");
					tab.deleteRow(4);/*删除一行*/
					tab.rows[3].deleteCell(1);/*删除某一行某一列*/
				}

			}
		</script>
	</body>

</html>

1. js动态表格
2. js动态生成表格【含合并单元格的表格】
3. JS动态控制列表宽度
4. js动态生成表格
5. js 动态生成表格
6. js动态建立表格
7. js动态控制表单的tr，td的显示和隐藏
8. js原生动态建立表格
9. 初学js---动态生成表格
10. Js如何动态创建表格
更多相关文章...
• jQuery Mobile 表单滑动条 - jQuery Mobile 教程
• jQuery Mobile 表格 - jQuery Mobile 教程
• 漫谈MySQL的锁机制
• IntelliJ IDEA代码格式化设置