4.表格与表单

4.1 动态添加行

<script language=”javascript”>

window.onload=function(){

    var oTr = document.getElementById(“member”).insertRow(2);    //插入一行

    var aText = new Array();

    aText[0] = document.createTextNode(“fresheggs”);

    aText[1] = document.createTextNode(“W610″);

    aText[2] = document.createTextNode(“Nov 5th”);

    aText[3] = document.createTextNode(“Scorpio”);

    aText[4] = document.createTextNode(“1038818″);

    for(var i=0;i<aText.length;i++){

        var oTd = oTr.insertCell(i);

        oTd.appendChild(aText[i]);

    }

}

</script>

4.2修改单元格内容

<script language=”javascript”>

window.onload=function(){

    var oTable = document.getElementById(“member”);

    oTable.rows[3].cells[4].innerHTML = “lost”;        //修改单元格内容

}

</script>

4.3 动态删除

parentElement是IE dom,

parentNode是标准DOM

<script language=”javascript”>

window.onload=function(){

    var oTable = document.getElementById(“member”);

    oTable.deleteRow(2);        //删除一行,后面的行号自动补齐//指从table中的第2行开始进行删除

    oTable.rows[2].deleteCell(1);    //删除一个单元格,后面的也自动补齐

}

</script>

<script language=”javascript”>

function myDelete(){

    var oTable = document.getElementById(“member”);

    //删除该行

    this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);

}

window.onload=function(){

    var oTable = document.getElementById(“member”);

    var oTd;

    //动态添加delete链接

    for(var i=1;i<oTable.rows.length;i++){

        oTd = oTable.rows[i].insertCell(5);

        oTd.innerHTML = “<a href=’#’>delete</a>”;

        oTd.firstChild.onclick = myDelete;    //添加删除事件

    }

}

</script>

4.4动态删除列

<script language=”javascript”>

function deleteColumn(oTable,iNum){

    //自定义删除列函数,即每行删除相应单元格

    for(var i=0;i<oTable.rows.length;i++)

        oTable.rows[i].deleteCell(iNum);

}

window.onload=function(){

    var oTable = document.getElementById(“member”);

    deleteColumn(oTable,2);

}

</script>

4.5 控制textarea的字符个数

<script language=”javascript”>

function LessThan(oTextArea){

    //返回文本框字符个数是否符号要求的boolean值

    return oTextArea.value.length < oTextArea.getAttribute(“maxlength”);

}

</script>

web前端知识的更多相关文章

  1. web前端知识体系总结

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

  2. 自己总结的web前端知识体系大全【欢迎补充】

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

  3. WEB前端知识体系脑图

    说在开始的话: 我上大学那会,虽说主要是学Java语言,但是web前端也稍微学了一些,那时候对前端也没多在意,因为涉入的不深,可以搞一个差不多可以看的界面就可以了,其他也没过多在意. 因为稍微了解一点 ...

  4. web前端知识体系大全

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

  5. web前端知识体系小结(转)

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

  6. Web前端知识体系精简

    Web前端技术由html.css和javascript三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言.而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知 ...

  7. 整理六百篇web前端知识混总

    9个有用的和免费的工具来支持动态网页开发 8个基本的引导工具的网页设计师 11款CSS3动画工具的开发 2016年某前端群题目答案参考 9最好的JavaScript压缩工具 创建响应式布局的10款优秀 ...

  8. (转)web前端知识精简

    Web前端技术由 html.css 和 javascript 三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言.而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学 ...

  9. Web前端知识体系

    看到一篇不错的文章,拿来收藏和分享. 原文:http://mp.weixin.qq.com/s/UFTfdE7LYhHquWEzwZKLCQ Web前端技术由html.css和 javascript三 ...

  10. web前端知识体系大全【欢迎补充】

    大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的是想要颠覆人 ...

随机推荐

  1. Gas Station——LeetCode

    There are N gas stations along a circular route, where the amount of gas at station i is gas[i]. You ...

  2. Sublime 2 Installation for Linux

    Linux You can download the package and uncompress it manually. Alternatively, you can use the comman ...

  3. C#实现数据结构——线性表(上)

    什么是线性表 数据结构中最常用也最简单的应该就是线性表,它是一种线性结构(废话,不是线性结构怎么会叫线性表?当然不是废话,古人公孙龙就说白马非马,现代生物学家也说鲸鱼不是鱼). 那什么是线性结构? 按 ...

  4. HPROF学习

    抓取HPROF log 1. GUI 可以通过 adt-bundle-windows-x86_64-20140702\sdk\tools\monitor.bat来抓取. 打开软件,选中相应的包,比如“ ...

  5. 使用Cordova框架把Webapp封装成Hybrid App实践——Android篇

    公司没有IOS和没有安卓开发人员,前端后端都是需要自己玩前几天技术经理说有一个需求要把webapp封装成Hybrid App,现已完成.记录一下从中遇到的问题和需要用到的开发环境的配置 将Webapp ...

  6. automatically select architectures

    各位在用XCode 5.x 打开用XCode 4.x 创建的项目时候.会遇到编译器警告automatically select architectures. 1. This is because th ...

  7. 去掉app右侧滑动时出现的滚动条

    把plus.webview.currentWebview().setStyle({scrollIndicator:'none'});放在mui.plusReady({});内

  8. Jenkins api java 调用

    String filepath = "E:\\config.xml"; HttpClient client = new DefaultHttpClient(); HttpPost ...

  9. oop实现方法与属性继承

    <script> /*父类 Person*/ function Person(name,age){ this.name=name; this.age=age; } Person.proto ...

  10. 再谈Cookies欺骗

    在上一篇关于cookies欺骗的随笔中,提到的解决方案是把密码MD5加密之后存入cookies中,确实这种方法实现了效果,不过把密码留在客户端等待着去被破解不是一个合适的方法,在此也感谢 @老牛吃肉 ...