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. 「ZJOI2018」胖（ST表+二分）

    「ZJOI2018」胖(ST表+二分) 不开 \(O_2\) 又没卡过去是种怎么体验... 这可能是 \(ZJOI2018\) 最简单的一题了...我都能 \(A\)... 首先我们发现这个奇怪的图每 ...

  2. Android Fragment用法知识点的讲解

    Android Fragment用法的讲解 碎片,它的出现是为了更好展示UI的设计,让程序更加得到充分的展示.Fragment的出现,如微信的额主界面包含多个Fragment,使得微信功能更加简洁明了 ...

  3. 《你不知道的javascript》读书笔记1

    概述 放假读完了<你不知道的javascript>上篇,学到了很多东西,记录下来,供以后开发时参考,相信对其他人也有用. js的工作原理 引擎:从头到尾负责整个js的编译和运行.(很大一部 ...

  4. 可变码率（英语：Variable bitrate，简称VBR）介绍

    可变码率(英语:Variable bitrate,简称VBR)这是一个用来形容通信服务质量(QoS for Quality of Service)的术语.和该词相对应的词是固定码率或固定比特率,英文c ...

  5. 深度学习python的配置（Windows）

    Windows下深度学习python的配置 1.安装包的下载 (1)anaconda (2)pycharm 2.安装教程 (1)anaconda a.降版本 b.换源 (2)pycharm a.修改h ...

  6. vue.js多页面开发环境搭建

    利用 vue-cli 搭建的项目大都是单页面应用项目,对于简单的项目,单页面就能满足要求.但对于有多个子项目的应用,如果创建多个单页面,显示有点重复,特别是 node_modules 会有多份相同的. ...

  7. jfixed使固定行列可编辑表格

    功能: 固定行列 可以在表格直接编辑 使用ajax对数据操作 使用tab键在可编辑列切换简单介绍一下jfixed 表格插件, jfixed /jfixed.rar

  8. tf.transpose()的用法

    一.tensorflow官方文档内容 transpose( a, perm=None, name='transpose' ) Defined in tensorflow/python/ops/arra ...

  9. django model数据 时间格式

    from datetime import datetime dt = datetime.now() print '时间:(%Y-%m-%d %H:%M:%S %f): ' , dt.strftime( ...

  10. mybatis随笔五之Executor

    在上一篇文章我们分析到了mapper接口方法的实现实际上是交由代理类来实现的,并最终调用Executor来查询,接下来我们对executor.query(ms, wrapCollection(para ...