js动态控制表单表格
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动态控制表单表格的更多相关文章
- js验证表单大全
js验证表单大全 1. 长度限制 <script> function test() { if(document.a.b.value.length>50) { alert(" ...
- JS 更改表单的提交时间和Input file的样式
JS转换时间 function renderTime(data) { var da = eval('new ' + data.replace('/', '', 'g').replace('/', '' ...
- jquery.form.js 让表单提交更优雅
jquery.form.js 让表单提交更优雅.可以页面不刷新提交表单,比jQuery的ajax提交要功能强大. 1.引入 <script src="/src/jquery-1.9.1 ...
- Vue.js：表单
ylbtech-Vue.js:表单 1.返回顶部 1. Vue.js 表单 这节我们为大家介绍 Vue.js 表单上的应用. 你可以用 v-model 指令在表单控件元素上创建双向数据绑定. v-mo ...
- 利用JS提交表单的几种方法和验证(必看篇)
第一种方式:表单提交,在form标签中增加onsubmit事件来判断表单提交是否成功 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <scr ...
- jquery.validate.js 验证表单时，在IE当中未验证就直接提交的原因
jquery.validate.js 验证表单时,在IE当中未验证就直接提交的原因 今天利用了jquery.validate.js来验证表单,发现在火狐.谷歌浏览器当中都可以进行验证,但是在IE系列浏 ...
- ★★★【卡法 常用js库】： js汇合 表单验证 cookie设置 日期格式 电话手机号码 email 整数 小数 金额 检查参数长度
[卡法 常用js库]: js汇合 表单验证 cookie设置 日期格式 电话手机号码 email 整数 小数 金额 检查参数长度 // +---------------------- ...
- JS form表单提交的方法
1.当输入用户名和密码为空的时候,需要判断.这时候就用到了校验用户名和密码,这个需要在jsp的前端页面写:有两种方法,一种是用submit提交.一种是用button提交.方法一: 在jsp的前端页面的 ...
- HTML 学习笔记 JQuery（表单,表格 操作）
表单应用 一个表单有3个基本组成部分 (1)表单标签:包含处理表单数据所用的服务器端程序URL 以及数据提交到服务器的方法 (2)表单域:包含文本框 密码框 隐藏框 多行文本框 复选框 单选框 下拉选 ...
随机推荐
- grid布局笔记学习一之父元素（容器）
HTML代码: <div id="box"> <div class="lbox box1" style="background: # ...
- Java学习笔记28（集合框架二：Iterator迭代器）
Iterator接口,翻译成中文是迭代器 迭代器的概念通俗解释: java中有很多的集合,内部有各种存储方法,取出的方式也各不相同,是否可以有一种通用的方式来获取呢? 这种方式类似for循环遍历, 通 ...
- MySQL 字符集utf8和utf-8的关系
目录 什么是字符集(character set) 校对规则(collation) ASCII码 Unicode国际化支持 UTF-8 utf8 utf8与utf8mb4的关系 超集 字符集设置 什么是 ...
- 深度学习python的配置（Windows）
Windows下深度学习python的配置 1.安装包的下载 (1)anaconda (2)pycharm 2.安装教程 (1)anaconda a.降版本 b.换源 (2)pycharm a.修改h ...
- .NET手记－Autofac入门Getting Started
内容主要翻译自官方文档,原文请看:http://autofac.readthedocs.org/en/latest/getting-started/index.html#application-sta ...
- LeetCode--No.013 Roman to Integer
13. Roman to Integer Total Accepted: 95998 Total Submissions: 234087 Difficulty: Easy Given a roman ...
- Liferay7 BPM门户开发之16: Liferay中用户\站点\组织架构\角色\用户组以及关联关系
用户 . 站点 . 组织架构 . 角色 . 用户组分别是:Users. Site. Organization. Role. UserGroups Users 用户是Liferay portal中的关键 ...
- vue中子组件通过$parent操作父组件的参数或者方法
先看一个简单的demo: 父组件添加一个弹框,弹框的内容是另外导入的一个子组件: <Modal v-model="accountDetailsModal" class=&qu ...
- [EXP]XAMPP 5.6.8 - SQL Injection / Persistent Cross-Site Scripting
<!-- # Exploit Title: SQL injection (and previous) # Date: -- # Exploit Author: Rafael Pedrero # ...
- MLlib之LR算法源码学习
/** * :: DeveloperApi :: * GeneralizedLinearModel (GLM) represents a model trained using * Generaliz ...