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. i春秋SRC部落携手同程SRC发布首届漏洞提交任务

    [部落守卫者集结令]拿巨额奖金?上白帽子排行榜?近距离膜拜大佬?学技术?掌握窍门?又或者你是个责任感爆棚想要互联网行业安全的有志青年?加入i春秋部落守卫者(The Guarders),统统满足你! [ ...

  2. Filesystem Case-Sensitivity Mismatch

    Filesystem Case-Sensitivity Mismatch The project seems to be located on a case-sensitive file system ...

  3. css3 动画与display:none冲突的解决方案

    概述 css不能在display:none和display:block之间进行动画,并且也不能在height:0和height:auto之间进行动画.这里我研究了一下在display:none和dis ...

  4. Go语言标准库之time

    Go语言标准库之time 时间的格式化和解析 格式化 Format Go语言和其他语言的时间格式化的方式不同,Go语言格式化的方式更直观,其他的语言一般是yyyy-mm-dd package main ...

  5. Spring Bean 的生命周期，如何被管理的？

    定义 Bean是一个被实例化,组装,并通过Spring IOC容器(BeanFactory和ApplicationContext容器)所管理的对象. 作用域 Spring支持五个作用域,分别是sing ...

  6. HDU 6022---MG loves set（K-D树）

    题目链接 Problem Description MG is an intelligent boy. One day he was challenged by the famous master ca ...

  7. web自动化测试---第一个自动化测试用例

    测试环境搭建好之后就可以写自动化测试脚本了,我们以baidu为例,写一个自动化测试脚本 from selenium import webdriver import time driver = webd ...

  8. js排序问题

    1.直接排序 var arr = [1,3,2,5]; function compare(a,b){ return a - b;//从小到大 return b - a;//从大到小 } console ...

  9. Maven setting配置镜像仓库

    国内Maven镜像仓库值得收藏 1.配置IDE构建的Maven存放目录(解压目录) 2.配置IDE的User setting file路径,修改setting配置文件 配置本地仓库   <!-- ...

  10. 批量去除文件的BOM头

    <?php class KillBom{ //定义扩展名 public static $m_ext = ['txt','php','js','css']; /** * 传入一个任意文件,自动区分 ...