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. 【转】学习Java虚拟机没用？ 听听当事人是怎么说的！

    我是大名鼎鼎的Java 虚拟机,  据说这个星球上每天有900多万程序员和我打交道,这真是一个惊人的数字. 这900多万人中不少人对我的技术内幕非常感兴趣, 有事儿没事儿都要把我“大卸八块”, 深入了 ...

  2. 使用node.js + json-server + mock.js 搭建本地开发mock数据服务

    在开发过程中,前后端不论是否分离,接口多半是滞后于页面开发的.所以建立一个REST风格的API接口,给前端页面提供虚拟的数据,是非常有必要的.对比过多种mock工具后,我最终选择了使用 json se ...

  3. vue 项目记录.路飞学城(一)

    前情提要: 通过vue 搭建路飞学城记录  一:项目分析 二:项目搭建 1:创建项目 vue init webpack luffy 2:初始化项目 清除默认的HelloWorld.vue组件和APP. ...

  4. 干货：教你如何监控 Java 线程池运行状态

    之前写过一篇 Java 线程池的使用介绍文章<线程池全面解析>,全面介绍了什么是线程池.线程池核心类.线程池工作流程.线程池分类.拒绝策略.及如何提交与关闭线程池等. 但在实际开发过程中, ...

  5. PHP-----浅谈垃圾回收机制

    前言 大多数编程语言都会有自身的垃圾回收机制,php也不例外.经常听很多人说gc,也就是垃圾回收器,全程为Garbage Collection. 在php5.3之前,是不包括垃圾回收机制的,也没有专门 ...

  6. [原创]MOF提权下载者代码

    0x001 网上的mof提权 调用的是js执行添加用户 而且有个缺陷 还不能一步到位...目标3389也连不上...也不知道上面安装了什么软件...毛然添加用户也不好比如有个类似狗之类的拦截添加用户 ...

  7. 高效的 JavaScript

    避免使用 eval 或 Function 构造器 改写 eval 如果你需要函数,使用 function 不要使用 with 不要在要求性能的函数中使用 try-catch-finally 隔离 ev ...

  8. 遍历List集合的三种方法

    List<String> list = new ArrayList<String>(); list.add("aaa"); list.add("b ...

  9. [java初探总结篇]__java初探总结

    前言 终于,java初探系列的学习,要告一阶段了,java初探系列在我的计划中是从头学java中的第一个阶段,知识主要涉及java的基础知识,所以在笔记上实在花了不少的功夫.虽然是在第一阶段上面花费了 ...

  10. 多线程读者写者问题--用QT实现

    先把代码贴上来,有时间再整理吧..因为工作中用Qt,所以用Qt实现的....刚上班,,忙! 三种方法,读者优先,写者优先和公平竞争.. 读者优先 #include <QCoreApplicati ...