javascript技巧篇(1) - javascript实现动态表格的三个重要方法

要实现动态表格,首先需要掌握javascript提供的3个非常重要的方法

(1)使用insertRow()方法添加表格行数。在javascript中增加表格的行,首先需要确定新增行插入表格的位置,然后执行插入操作。

var table=document.getElementById("mytable");//取得表格对象

var  index=table.rows.length;//取得表格的行数

var nextRow =table.insertRow(index);//取得新插入行的对象并执行插入操作(这句话,将新增行插入到表格的最后一行)

(2)使用deleteRow()方法删除表格的行。删除表格的行和增加表格的行类似,需要先确定删除行的位置,再删除。

var table=document.getElementById("mytable");//取得表格对象

var row=document.getElementById("rowId");//取得行对象

var index=row.rowIndex;//取得行数的索引值

table.deleteRow(index);//删除指定行

(3)使用setAttribute()方法设置元素的属性。例如设置某一行id的属性值

var  nextRow=table.insertRow(index);//id对象

nextRow.setAttribute("id",idVal);//设置id的值

时间: 2024-08-10 23:06:28

javascript技巧篇(1) - javascript实现动态表格的三个重要方法的相关文章

javascript技巧篇(3) - 防止重复提交表单

在页面加入如下javascript程序代码: var checkSubmitFlag=false; var checkSubmit(){ function(){ if(checkSubmitFlag==true){ return false; } checkSubmitFlag=true; return true; } } //双击按钮就返回FALSE document.ondbclick=function docondbclick(){ window.event.returnValue=fal

[技巧篇]11.JavaScript原生态如何获取浏览器请求地址中的参数

var getAccessParams = function(){ var i,ilen,strs,keyName,keyValue, params={}, path = window.location.pathname, url = window.location.href; if(url.indexOf("?")>-1){ var index=url.indexOf("?"); strs=url.substring(index+1); //console.

javascript技巧篇(2)

一.利用split()截取字符串 说明:split()函数返回的是一个字符串数组,在字符串中出现的需要截取的字符的位置都要进行分解.所以在调用截取结果的时候需要获取返回数组中的值 例:根据邮箱地址获取该用户的邮箱用户名称 var  mail=document.getElementById("mail");.value.toString();//获取用户邮箱地址 var username=mail.split("@");//获取字符'@'之前的用户名 document

JavaScript筑基篇(二)->JavaScript数据类型

说明 介绍JavaScript数据类型 目录 前言 参考来源 前置技术要求 JavaScript的6种数据类型 哪6种数据类型 undefined 类型 null 类型 boolean 类型 number 类型 string 类型 复杂 类型 基本型和引用型的不同 关于数据类型的一些常见疑问 为什么typeof null === 'object' string,String,object,Object,function,Function的关系 关于String类型与string类型的疑问 fun

[javascript] js中判断对象是否为空的三种实现方法

在写js脚本的时候经常遇到对象为空或者不是对象的情况,出现这种情况我们可以用if去判断它,然后去执行相应的处理方法,具体判断他们的方法有以下几种: 1.if (typeOf(x) == "undefined")2.if (typeOf(x) != "object")3.if(!x) 其中第三种是最简单的方法,但是第三种就不能用if(x)这种互斥的方法去判断,只能在对象前面加!(java里面!x为true的时候x肯定为false了,但是这里是不可以的)

JavaScript技巧&写法

JavaScript技巧篇: 1>状态机 var state = function () { this.count = 0; this.fun = null; this.nowcount = 0; }; state.prototype = { load: function (count,fun) { this.count = count; this.fun = fun; this.nowcount=0; }, trigger: function () { this.nowcount++; if

深入理解javascript作用域系列第二篇——词法作用域和动态作用域

× 目录 [1]词法 [2]动态 前面的话 大多数时候,我们对作用域产生混乱的主要原因是分不清楚应该按照函数位置的嵌套顺序,还是按照函数的调用顺序进行变量查找.再加上this机制的干扰,使得变量查找极易出错.这实际上是由两种作用域工作模型导致的,作用域分为词法作用域和动态作用域,分清这两种作用域模型就能够对变量查找过程有清晰的认识.本文是深入理解javascript作用域系列第二篇——词法作用域和动态作用域 词法作用域 第一篇介绍过,编译器的第一个工作阶段叫作分词,就是把由字符组成的字符串分解成

HTML + CSS + JavaScript 实现勾选动态表格中的记录

要求 添加一个学生信息表格,表格的信息有编号.姓名.性别.信息勾选4个字段,可以任意的勾选其中0行或以上信息行. 主要步骤分析 创建一个学生信息表格 定义三个按钮:全选.全不选.反选 给添加按钮绑定点击事件 步骤实现 创建一个表格 <table> <caption>学生信息表</caption> <tr> <th><input type="checkbox" name="cb" id="fi

冷门却使用的 javascript 技巧

前端已经被玩儿坏了!像用近似乱码的 javascript 拼一个图形,而且可以正常运行等炫酷的玩意已经不是什么新闻了,像用||操作符给变量赋默认值也是人尽皆知的旧闻了,今天看到Quora上一个帖子,瞬间又GET了好多前端技能,一些属于技巧,一些则是闻所未闻的冷知识,一时间还消化不过来.现分类整理出来分享给大家,也补充了一些平时的积累和扩展了一些内容. HTML篇 浏览器地址栏运行JavaScript代码 这个很多人应该还是知道的,在浏览器地址栏可以直接运行JavaScript代码,做法是以jav