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

直接放代码：

<!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>

　　

js动态控制表单表格的更多相关文章

  1. js验证表单大全

    js验证表单大全 1. 长度限制 <script> function test() { if(document.a.b.value.length>50) { alert(" ...

  2. JS 更改表单的提交时间和Input file的样式

    JS转换时间 function renderTime(data) { var da = eval('new ' + data.replace('/', '', 'g').replace('/', '' ...

  3. jquery.form.js 让表单提交更优雅

    jquery.form.js 让表单提交更优雅.可以页面不刷新提交表单,比jQuery的ajax提交要功能强大. 1.引入 <script src="/src/jquery-1.9.1 ...

  4. Vue.js：表单

    ylbtech-Vue.js:表单 1.返回顶部 1. Vue.js 表单 这节我们为大家介绍 Vue.js 表单上的应用. 你可以用 v-model 指令在表单控件元素上创建双向数据绑定. v-mo ...

  5. 利用JS提交表单的几种方法和验证(必看篇)

    第一种方式:表单提交,在form标签中增加onsubmit事件来判断表单提交是否成功 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <scr ...

  6. jquery.validate.js 验证表单时，在IE当中未验证就直接提交的原因

    jquery.validate.js 验证表单时,在IE当中未验证就直接提交的原因 今天利用了jquery.validate.js来验证表单,发现在火狐.谷歌浏览器当中都可以进行验证,但是在IE系列浏 ...

  7. ★★★【卡法 常用js库】： js汇合 表单验证 cookie设置 日期格式 电话手机号码 email 整数 小数 金额 检查参数长度

    [卡法 常用js库]: js汇合 表单验证  cookie设置  日期格式  电话手机号码  email  整数  小数  金额   检查参数长度 // +---------------------- ...

  8. JS form表单提交的方法

    1.当输入用户名和密码为空的时候,需要判断.这时候就用到了校验用户名和密码,这个需要在jsp的前端页面写:有两种方法,一种是用submit提交.一种是用button提交.方法一: 在jsp的前端页面的 ...

  9. HTML 学习笔记 JQuery（表单,表格 操作）

    表单应用 一个表单有3个基本组成部分 (1)表单标签:包含处理表单数据所用的服务器端程序URL 以及数据提交到服务器的方法 (2)表单域:包含文本框 密码框 隐藏框 多行文本框 复选框 单选框 下拉选 ...

随机推荐

  1. 方向导数，梯度和梯度下降之BGD,SGD

    方向导数和梯度的直观理解,from知乎-马同学: https://www.zhihu.com/question/36301367 BGD,SGD: https://www.cnblogs.com/gu ...

  2. cad.net 利用win32api实现不重复打开dwg路径的文件夹(资源管理器)

    这里地址的方法也是可用的,但是net3.5不能使用 为此我选择使用win32api的方式来遍历当前桌面所有资源管理器 /// <summary> /// 不重复打开dwg路径的资源管理器 ...

  3. SQL注入的优化和绕过

    作者:Arizona 原文来自:https://bbs.ichunqiu.com/thread-43169-1-1.html 0×00 ~ 介绍 SQL注入毫无疑问是最危险的Web漏洞之一,因为我们将 ...

  4. spring框架学习笔记7：事务管理及案例

    Spring提供了一套管理项目中的事务的机制 以前写过一篇简单的介绍事务的随笔:http://www.cnblogs.com/xuyiqing/p/8430214.html 还有一篇Hibernate ...

  5. cc、gcc、g++、CC的区别和联系

    gcc是C编译器:g++是C++编译器:linux下cc一般是一个符号连接,指向gcc:gcc和g++都是GUN(组织)的编译器.而CC则一般是makefile里面的一个名字,即宏定义,嘿,因为Lin ...

  6. 前端下载excel文件功能的三种方法

    1 从后端接收json数据,前端处理生成excel下载 JsonExportExcel的github地址:https://github.com/cuikangjie/JsonExportExcel 这 ...

  7. 基于Docker+Prometheus+Grafana监控SpringBoot健康信息

    在微服务体系当中,监控是必不可少的.当系统环境超过指定的阀值以后,需要提醒指定的运维人员或开发人员进行有效的防范,从而降低系统宕机的风险.在CNCF云计算平台中,Prometheus+Grafana是 ...

  8. SQL 必知必会·笔记<12>组合查询

    什么是组合查询 SQL 通过执行多个查询(多条SELECT 语句),并将结果作为一个查询结果集返回.这些组合查询通常称为并(union)或复合查询(compound query). 什么时候使用组合查 ...

  9. 本地k8s环境minikube搭建过程

    首先要安装docker这个环境是需要自己安装的.相关步骤如下: 1 2 3 4 5 6 7 8 9 10 11 yum install -y yum-utils device-mapper-persi ...

  10. 【详解】WebSocket相关知识整理

    前言 记得大概半年前就产生了疑惑,即后台如何主动向前端推送数据.问了下专业老师,知道了原来有一个叫WebSocket的技术可以用于推送数据.于是,当时我就找了个教程,用的是Spring WebSock ...