BlogJava-ZeroLine-随笔分类-JavaScripthttp://www.blogjava.net/zeroline/category/47008.htmlAll things are difficult before they are easy.zh-cnSun, 19 Dec 2010 05:18:22 GMTSun, 19 Dec 2010 05:18:22 GMT60javascript 触发事件列表 http://www.blogjava.net/zeroline/archive/2010/12/19/341087.htmlzerolinezerolineSun, 19 Dec 2010 02:31:00 GMThttp://www.blogjava.net/zeroline/archive/2010/12/19/341087.htmlhttp://www.blogjava.net/zeroline/comments/341087.htmlhttp://www.blogjava.net/zeroline/archive/2010/12/19/341087.html#Feedback0http://www.blogjava.net/zeroline/comments/commentRss/341087.htmlhttp://www.blogjava.net/zeroline/services/trackbacks/341087.html1.单击事件___onclick
用户单击鼠标按键时产生的事件.同时onclick指定的事件处理程序或代码将被调用执行.
如:<input type="button" value="打开页面" onlick="window.open('xxxx.html','newwindow','width=456,height=230,toolbar=no,menubar=no,scrollbars=yes');">
 
2.改变事件___onchange
当text或textarea元素内的字符值改变或select表格选项状态改变里发生该事件.
如;<textarea name="liuyan" rows=5 cols=70 value=" " onchange=alert("您在文本框中添加了新的内容")>
 
3.选中事件____onselect
当text或textarea对象中的文字被选中里会引发该事件
如:<ipnut type="text" value="默认信息" onselect=alert("您选中了文本框中的文字")>
 
4.获得焦点事件____onfocus
用户单击text或textarea以及select对象时,即光标落在文本框或选择框时会产生该事件.
如:<select name="zhengjian" onfocus="alert("我成为焦点")>
 
5.失去焦点事件______onblur
失去焦点事件正好与获得焦点事件相对,当text对象,textarea对象或select对象不再拥有焦点而退出后台时,引发该事件.
 
6.载入文件事件____onload
当页面文件载入时,产生该事件.onload的一个作用就是在首次载入一个页面文件时检测cookie的值,并用一个变量为其赋值,使它可以被源代码使用,本事件是window的事件,但是在HTML中指定事件处理程序时,一般把它写在<body>标记中.
如:<body onload=alert("正在加载页面,请等待...")>
 
7.卸载文件事件____onunload
与载入文件事件onload正好相反,当web页面退出时引发的事件,并可更新cookie的状态
如:<body onunload="confirm("你确定要离开本页?")>
 
8.鼠标覆盖事件 _____onmouseover
onmouseover是当鼠标位于元素上方时所引发的事件
如:<input type="boutton" value="按钮" onmouseover="window.status='请您注意下面的状态栏'; return true">
 
9.鼠标离开事件_____onmouseout
onmouseout是鼠标离开元素里引发的事件.如果和鼠标覆盖事件同时使用,可以创建动态按钮的效果.
 
10.一般事件
ondbclick          鼠标双击事件
鼠标上的按键被按下时激活的事件
鼠标按下后,松开鼠标时触发的事件
鼠标移动里触发的事件.
onkeypress       当键盘上的某个键被按下并且释放时触发的事件,要求页面内必须有激活对象
onkeydown       当键盘上某个键被按下时触发的事件,要求页面内必须有激活对象
onkeyup            当键盘上某个按键被放开时触发的事件,要求页面内必须有激活对象
 
11.页面相关事件
onabort   图片在下载时被用户中断
onbeforeunload   当前页面的内容将要被改变时触发的事件
onerror        捕捉当前页面因为某种原因而出现的错误,如脚本错误.
onmove       浏览器的窗口被移动里触发的事件
onresize     当浏览器的大小被改变时触发的事件
onscroll         浏览器的滚动条位置发生变化时触发的事件
onstop          浏览器的"停止"按钮被按下或者正在下载的文件被中断时触发的事件.
 
12. 表单相关事件
onreset      当表单中reset属性被激活时触发的事件.
onsubmit  一个表单被递交时触发的事件.
 
13.滚动字幕事件
onbounce    当marquee内的内容移动至marquee显示范围之外时触发的事件.
onfinish      当marquee元素完成需要显示的内容后触发的事件.
onstart        当marquee元素开始显示内容时触发的事件.
 
14.编辑事件.
onbeforecopy    当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发的事件.
onbeforeupdate  当浏览者粘贴系统剪贴板中的内容时通知目标对象
oncontextmenu   当按下鼠标右键出现菜单或通过键盘的按键触发页面菜单时触发的事件.
                                <body oncontentmenu="return false">禁止使用鼠标右键
oncopy              当页面当前被选择内容被复制后触发的事件
oncut                  当页面当前被选择内容被剪切时触发的事件
onpaste               当内容被粘贴时触发的事件
ondrag                当某个对象被拖动时触发的事件
ondragend          当鼠标拖动结束时触发的事件,即鼠标的按键被释放时触发的事件.
 
15.数据绑定
onafterupdate    当数据完成由数据源到对象的传送时触发的事件
oncellchange      当数据来源发生变化时触发的事件
ondataavailable  当数据接收完成时触发的事件
ondatasetchanged   数据在数据源发生变化时触发的事件.
ondatasetcomplete   当数据源的全部有效数据读取完毕时触发的事件.
onerrorupdate          当使用onbeforeupdate事件触发取消了数据传送时,代替onafterupdate事件.
onrowenter               当前数据源的数据发生变化并且有新的有效数据时触发的事件.
onrowexit                 当前数据源的数据将要发生变化时触发的事件
onrowsdelete            当前数据记录将被删除时触发的事件
onrowsinserted         当前数据源将要插入新数据记录时触发的事件
 
16.外部事件
onafterprint      当文档被打印后触发的事件
onbeforeprint   当文档即将打印时触发的事件
onhelp              当浏览者按下F1键或者单击浏览器中的"帮助"按钮时触发的事件

zeroline 2010-12-19 10:31 发表评论
]]>15款js编辑器大全 收藏http://www.blogjava.net/zeroline/archive/2010/12/19/341084.htmlzerolinezerolineSun, 19 Dec 2010 01:44:00 GMThttp://www.blogjava.net/zeroline/archive/2010/12/19/341084.htmlhttp://www.blogjava.net/zeroline/comments/341084.htmlhttp://www.blogjava.net/zeroline/archive/2010/12/19/341084.html#Feedback0http://www.blogjava.net/zeroline/comments/commentRss/341084.htmlhttp://www.blogjava.net/zeroline/services/trackbacks/341084.html

看了一下,感觉不错,先收藏一下.以后说不定有用.

  1. 非常实用的163邮箱编辑器 new163Editor.rar (395.12 KB)
  2. 2 soEditor v 2.5 lite

    官方: http://www.siteobjects.com/pages/index.cfm 下载: http://www.siteobjects.com/pages/order.cfm 可 以下载的是lite版, 目前还没找到pro版的. 可以支持ASP,Coldfusion,ASP.NET. 界面做的很整洁,但没有文件管理,最大的问题是对于直接从其他处复制来的图片不会做自动修正.当然这个也仁者见仁了. soEditor 2.5 is an extremely powerful browser-based WYSIWYG content authoring tool

    designed specifically for dynamic web applications. This customizable editor allows

    developers to make it possible for anyone to create, edit and maintain web content

    without the need for HTML knowledge or programming expertise.

  3. AreaEdit V 0.4.2 演示: http://www.formvista.com/uploaded_html/demos/areaedit/examples/simple_example.php 下载: http://www.formvista.com/goalTracker/stream_download.php/14/areaedit_0.4.3.tar.gz 支持: http://www.formvista.com/forum 修 改htmlarea的编辑器增加了图片文件管理器 htmlarea 作为在线编辑器领域的开源作品享有不错的知名度有很多的支持者和插件开发者,这些都得益于html良好的扩展性. AreaEdit is a formVista compatible fork of the rapidly developing Xinha project.

    It is the code that is generated by the formVista FVML <htmleditor> tag during rendering. Xinha itself is a fork of the original HTMLArea component created by Mihai Bazon and

    sponsored by Interactivetools. AreaEdit maintains the original HTMLArea (modified BSD)

    license and is free to use. While it is designed to work within formVista without modification, AreaEdit does not

    requre formVista. It is a fully functional editor component supporting a number of

    plugins and can as easily be used as a standalone editor component for any PHP web

    application. The primary difference between AreaEdit and Xinha is one of focus. The Xinha project

    aims to be a rapidly developing feature-filled editor with many plugins. By contrast, AreaEdit takes a slower minimalists approach. It aims first and foremost

    to be functional and maintainable. The feature set we are focusing on is targeted

    squarely at the serious non-technical business user. Business users don&apos;t care

    about the nuances of HTML <br> and <p> tags, they just want the editor to work as

    they would expect. If your audience is primarly composed to developers or those familar with HTML, you

    should take a look at Xinha. AreaEdit is known to work with MSIE 5.5 or later and any modern Gecko based

    browsers. (FireFox, Mozilla).

  4. DevEdit Version 5.0.1 破解版 官方网站: http://www.interspire.com 演示: http://www.interspire.com/devedit/demo.php 下载: http://bbs.80nian.net/thread-259-1-1.html?acdt=/devedit.rar 警告: 本程序是商业程序,仅供网友研究学习,请在下载后24小时内删除. 对于由此产生的法律问题本站概不负责

  5. Web Wiz Rich Text Editor v3.0 下载: http://www.webwizguide.info/asp/sample_scripts/RTE_application.asp 演示: http://www.richtexteditor.org/demo/ 支持在线文件管理,跨浏览器,但对表格编辑功能不强,界面不够精致 6

  6. KTML.Pro.v3.5.6-SPK100 下载: http://bbs.80nian.net/thread-259-1-1.html?acdt=/KTML_PRO-3.5.6.ZIP 警告: 本程序是商业程序,仅供网友研究学习,请在下载后24小时内删除. 对于由此产生的法律问题概不负责. 有着类似dw一样的属性栏,这个是pro版,提供了lite版没有的对表格的属性编辑等功能,

    有兴趣的可以去官方看看lite版.

  7. TextArea Rich v3.0 下载: http://bbs.80nian.net/thread-259-1-1.html?acdt=/textarea.rich.v3.0.rar 做的很干净的编辑器,适合于CMS.功能强大.

  8. Tabula WYSIWYG HTML editor ver. 2.2 演示: http://www.tabula.biz/showArticle.asp?articleid=253 下载: http://www.tabula.biz/ShowArticle.asp?MID=5&ArticleID=257 和ewebsoft很像的编辑器右键功能强悍,界面做的稍稍差了点点：）

  9. TinyMCE 2.0RC3 官方网站: http://tinymce.moxiecode.com/ 官方演示: http://tinymce.moxiecode.com/example_full.php?example=true 下载: http://keihanna.dl.sourceforge.net/sourceforge/tinymce/tinymce_2_0RC3.zip 有一个很好的开源编辑器,界面,功能和可扩展性做的都很好

  10. 网页在线编辑器 mEditor ASP 中文版 v2.0 下载: http://bbs.80nian.net/thread-259-1-1.html?acdt=/meditor.zip 运 行环境支持: 操作系统支持: Windows 2000 系列 / Window Xp 系列 / Window 2003 系列网络服务器支持: Asp 版本要求安装IIS 5.0版本或更高版本 浏览器支持: 正常运行在IE5.5以上版本,部分特殊功能要求IE版本升级到6.0以才能使用 >>> 在网络服务器设置完成后,运行index.asp进行样式管理. >>> 建议将mEditor放在项目的根目录. 注意事项 有关无组件上传类 v2.0 升级事项 1.修正内核部分字符编码的问题. 2.增强系统运行的健壮性与稳定性. 3.增加了"模式按钮"栏式管理,可随意启用/取消模式按钮. 4.在编辑器的样式上进行了整体的修改. 5.增加了编辑器的缩放功能,仅适用于IE5.5以上版本. 6.增加了"搜索替换"功能(快捷键CTRL+R),仅适用于IE5.5以上版本. 7.将部分功能移植到"代码模式"使用,如:"全选","删除","复制"..... 8.增加快捷键CTRL+1(预览模式),CTRL+2(代码模式),CTRL+3(视图模式),CTRL+R(查找替换).

  11. EWELive JScript Editor 0.4 6 下载:  http://www.ewelive.com/downloads/0_64_JS.zip 我曾经仔细的去汉化过这个版本的编辑器,加了一些自己的界面设计和按钮. 速度很快,功能简单使用,容易修改. 对于喜欢简单一族的朋友可以下来看看. 官方: http://www.ewelive.com 演示: http://www.ewelive.com/demo_js/sample.php

  12. InnovaStudio WYSIWYG Editor v2.3 警告: 本程序是商业程序,仅供网友研究学习,请在下载后24小时内删除. 对于由此产生的法律问题概不负责. 界面做的很是精细, 功能极强大,非常优秀之作,强烈推荐下载 http://www225.fixdown.com/code/sp-iwe23.rar

  13. CuteEditor for ASP Enterprise License 警告: 本程序是商业程序,仅供网友研究学习,请在下载后24小时内删除. 对于由此产生的法律问题概不负责. Cuteditor 我曾研究过,不亏为成熟的商业作品,各方面做的都很规范,功能强大,也提供简体中文语言包,

    个人非常喜欢.强烈推荐 下载: http://bbs.80nian.net/thread-259-1-1.html?acdt=/CuteEditor_for_ASP_Enterprise_License.rar

  14. FCKeditor 2.6 精简版第三版新增表格功能 http://bbs.80nian.net/viewthread.php?tid=158&highlight=FC

15 加一个新浪编辑器,不为别的,漂亮 http://test.tstring.com.cn/sinaeditor/editor.htm



zeroline 2010-12-19 09:44 发表评论
]]>经典 JavaScript 正则表达式http://www.blogjava.net/zeroline/archive/2010/11/17/338312.htmlzerolinezerolineWed, 17 Nov 2010 13:49:00 GMThttp://www.blogjava.net/zeroline/archive/2010/11/17/338312.htmlhttp://www.blogjava.net/zeroline/comments/338312.htmlhttp://www.blogjava.net/zeroline/archive/2010/11/17/338312.html#Feedback0http://www.blogjava.net/zeroline/comments/commentRss/338312.htmlhttp://www.blogjava.net/zeroline/services/trackbacks/338312.html正则表达式用于字符串处理，表单验证等场合，实用高效，但用到时总是不太把握，以致往往要上网查一番。我将一些常用的表达式收藏在这里，作备忘之用。

匹配中文字符的正则表达式：

[\u4e00-\u9fa5]

匹配双字节字符(包括汉字在内)：

[^\x00-\xff]

应用：计算字符串的长度（一个双字节字符长度计2，ASCII字符计1）

String.prototype.len=function(){ return this.replace([^\x00-\xff]/g,"aa").length; }

匹配空行的正则表达式：

\n[\s|]*\r

匹配HTML标记的正则表达式：

/<(.*)>.*<\/\1>|<(.*) \/>/

匹配首尾空格的正则表达式：

(^\s*)|(\s*$)

应用：j avascript中没有像v bscript那样的trim函数，我们就可以利用这个表达式来实现，如下：

String.prototype.trim = function()
{
    return this.replace(/(^\s*)|(\s*$)/g, "");
}

利用正则表达式分解和转换IP地址
下面是利用正则表达式匹配IP地址，并将IP地址转换成对应数值的Javascript程序：

function IP2V(ip)
{
    re=/(\d+)\.(\d+)\.(\d+)\.(\d+)/g  //匹配IP地址的正则表达式
    if(re.test(ip))
    {
        return RegExp.$1*Math.pow(255,3))+RegExp.$2*Math.pow(255,2))+RegExp.$3*255+RegExp.$4*1
    }
    else
    {
        throw new Error("Not a valid IP address!")
    }
}

不过上面的程序如果不用正则表达式，而直接用split函数来分解可能更简单，程序如下：

var ip="10.100.20.168"
ip=ip.split(".")
alert("IP值是："+(ip[0]*255*255*255+ip[1]*255*255+ip[2]*255+ip[3]*1))

匹配Email地址的正则表达式：

\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*

匹配网址URL的正则表达式：

http://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?

利用正则表达式去除字串中重复的字符的算法程序：[*注：此程序不正确]

var s="abacabefgeeii"
var s1=s.replace(/(.).*\1/g,"$1")
var re=new RegExp("["+s1+"]","g")
var s2=s.replace(re,"")
alert(s1+s2)  //结果为：abcefgi

*注
===============================
如果var s = “abacabefggeeii”
结果就不对了，结果为：abeicfgg
正则表达式的能力有限
===============================

我原来在CSDN上发贴寻求一个表达式来实现去除重复字符的方法，最终没有找到，这是我能想到的最简单的实现方法。思路是使用后向引用取出包括重复的字符，再以重复的字符建立第二个表达式，取到不重复的字符，两者串连。这个方法对于字符顺序有要求的字符串可能不适用。

得用正则表达式从URL地址中提取文件名的javascript程序，如下结果为page1

s="http://blog.penner.cn/page1.htm"
s=s.replace(/(.*\/){ 0, }([^\.]+).*/ig,"$2")
alert(s)

利用正则表达式限制网页表单里的文本框输入内容：

用正则表达式限制只能输入中文：

onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))"

用正则表达式限制只能输入全角字符：

onkeyup="value=value.replace(/[^\uFF00-\uFFFF]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\uFF00-\uFFFF]/g,''))"

用正则表达式限制只能输入数字：

onkeyup="value=value.replace(/[^\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"

用正则表达式限制只能输入数字和英文：

onkeyup="value=value.replace(/[\W]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"

匹配非负整数（正整数 + 0）

^\d+$

匹配正整数

^[0-9]*[1-9][0-9]*$

匹配非正整数（负整数 + 0）

^((-\d+)|(0+))$

匹配负整数

^-[0-9]*[1-9][0-9]*$

匹配整数

^-?\d+$

匹配非负浮点数（正浮点数 + 0）

^\d+(\.\d+)?$

匹配正浮点数

^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$

匹配非正浮点数（负浮点数 + 0）

^((-\d+(\.\d+)?)|(0+(\.0+)?))$

匹配负浮点数

^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$

匹配浮点数

^(-?\d+)(\.\d+)?$

匹配由26个英文字母组成的字符串

^[A-Za-z]+$

匹配由26个英文字母的大写组成的字符串

^[A-Z]+$

匹配由26个英文字母的小写组成的字符串

^[a-z]+$

匹配由数字和26个英文字母组成的字符串

^[A-Za-z0-9]+$

匹配由数字、26个英文字母或者下划线组成的字符串

^\w+$

匹配email地址

^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$

匹配url

^[a-zA-z]+://匹配(\w+(-\w+)*)(\.(\w+(-\w+)*))*(\?\S*)?$

匹配html tag

<\s*(\S+)(\s[^>]*)?>(.*?)<\s*\/\1\s*>

Visual Basic & C# Regular Expression
1.确认有效电子邮件格式
下面的示例使用静态 Regex.IsMatch 方法验证一个字符串是否为有效电子邮件格式。如果字符串包含一个有效的电子邮件地址，则 IsValidEmail 方法返回 true，否则返回 false，但不采取其他任何操作。您可以使用 IsValidEmail，在应用程序将地址存储在数据库中或显示在 ASP.NET 页中之前，筛选出包含无效字符的电子邮件地址。

[Visual Basic]

Function IsValidEmail(strIn As String) As Boolean
' Return true if strIn is in valid e-mail format.
Return Regex.IsMatch(strIn, ("^([\w-\.]+)@((\[[0-9]{ 1,3 }\.[0-9]{ 1,3 }\.[0-9]{ 1,3 }\.)|(([\w-]+\.)+))([a-zA-Z]{ 2,4 }|[0-9]{ 1,3 })(\]?)$")
End Function

[C#]

bool IsValidEmail(string strIn)
{
// Return true if strIn is in valid e-mail format.
return Regex.IsMatch(strIn, @"^([\w-\.]+)@((\[[0-9]{ 1,3 }\.[0-9]{ 1,3 }\.[0-9]{ 1,3 }\.)|(([\w-]+\.)+))([a-zA-Z]{ 2,4 }|[0-9]{ 1,3 })(\]?)$");
}

2.清理输入字符串
下面的代码示例使用静态 Regex.Replace 方法从字符串中抽出无效字符。您可以使用这里定义的 CleanInput 方法，清除掉在接受用户输入的窗体的文本字段中输入的可能有害的字符。CleanInput 在清除掉除 @、-（连字符）和 .（句点）以外的所有非字母数字字符后返回一个字符串。

[Visual Basic]

Function CleanInput(strIn As String) As String
' Replace invalid characters with empty strings.
Return Regex.Replace(strIn, "[^\w\.@-]", "")
End Function

[C#]

String CleanInput(string strIn)
{
    // Replace invalid characters with empty strings.
    return Regex.Replace(strIn, @"[^\w\.@-]", "");
}

3.更改日期格式
以下代码示例使用 Regex.Replace 方法来用 dd-mm-yy 的日期形式代替 mm/dd/yy 的日期形式。

[Visual Basic]

Function MDYToDMY(input As String) As String
Return Regex.Replace(input, _
"\b(?<month>\d{ 1,2 })/(?<day>\d{ 1,2 })/(?<year>\d{ 2,4 })\b", _
"${ day }-${ month }-${ year }")
End Function

[C#]

String MDYToDMY(String input)
{
    return Regex.Replace(input,"\\b(?<month>\\d{ 1,2 })/(?<day>\\d{ 1,2 })/(?<year>\\d{ 2,4 })\\b","${ day }-${ month }-${ year }");
}

Regex 替换模式
本示例说明如何在 Regex.Replace 的替换模式中使用命名的反向引用。其中，替换表达式 ${ day } 插入由 (?…) 组捕获的子字符串。

有几种静态函数使您可以在使用正则表达式操作时无需创建显式正则表达式对象，而 Regex.Replace 函数正是其中之一。如果您不想保留编译的正则表达式，这将给您带来方便

4.提取 URL 信息
以下代码示例使用 Match.Result 来从 URL 提取协议和端口号。例如，“http://www.penner.cn:8080……将返回“http:8080”。

[Visual Basic]

Function Extension(url As String) As String
Dim r As New Regex("^(?<proto>\w+)://[^/]+?(?<port>:\d+)?/", _
RegexOptions.Compiled)
Return r.Match(url).Result("${ proto }${ port }")
End Function

[C#]

String Extension(String url)
{
    Regex r = new Regex(@"^(?<proto>\w+)://[^/]+?(?<port>:\d+)?/",
    RegexOptions.Compiled);
    return r.Match(url).Result("${ proto }${ port }");
}

只有字母和数字，不小于6位，且数字字母都包含的密码的正则表达式
在C#中，可以用这个来表示：

"\w{ 6 }(\w+)*"

一个将需要将路径字符串拆分为根目录和子目录两部分的算法程序，考虑路径格式有：C:\aa\bb\cc ，\\aa\bb\cc ， ftp://aa.bb/cc 上述路径将分别被拆分为：C:\和aa\bb\cc ，\\aa 和 \bb\cc ， ftp:// 和 aa.bb/cc 用javascript实现如下：

var strRoot,strSub
var regPathParse=/^([^\\^\/]+[\\\/]+|\\\\[^\\]+)(.*)$/
if(regPathParse.test(strFolder))
{
    strRoot=RegExp.$1
    strSub=RegExp.$2
}


zeroline 2010-11-17 21:49 发表评论
]]>常用的js验证数字，电话号码，传真，邮箱，手机号码，邮编，日期 http://www.blogjava.net/zeroline/archive/2010/11/17/338310.htmlzerolinezerolineWed, 17 Nov 2010 13:44:00 GMThttp://www.blogjava.net/zeroline/archive/2010/11/17/338310.htmlhttp://www.blogjava.net/zeroline/comments/338310.htmlhttp://www.blogjava.net/zeroline/archive/2010/11/17/338310.html#Feedback0http://www.blogjava.net/zeroline/comments/commentRss/338310.htmlhttp://www.blogjava.net/zeroline/services/trackbacks/338310.html阅读全文

zeroline 2010-11-17 21:44 发表评论
]]>使用JS对表格中的行进行增删http://www.blogjava.net/zeroline/archive/2010/11/11/337854.htmlzerolinezerolineThu, 11 Nov 2010 14:33:00 GMThttp://www.blogjava.net/zeroline/archive/2010/11/11/337854.htmlhttp://www.blogjava.net/zeroline/comments/337854.htmlhttp://www.blogjava.net/zeroline/archive/2010/11/11/337854.html#Feedback0http://www.blogjava.net/zeroline/comments/commentRss/337854.htmlhttp://www.blogjava.net/zeroline/services/trackbacks/337854.html 1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2<html xmlns="http://www.w3.org/1999/xhtml">
 3<head>
 4<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5<title>JS_array</title>
 6<script type="text/javascript">
 7    function printArray(){
 8        var arr = new Array() ;
 9        arr[0] = "One" ;
10        arr[1] = "Two" ;
11        arr[5] = "Five" ;
12        for(i=0; i<arr.length; i++){
13            alert(arr[i]) ;
14        }
15    }
16
17    function testTable(){
18        var t1 = document.getElementById('t1') ;  //返回指定ID的 html DOM 对象
19        var rows = t1.rows;
20        alert(rows.length) ;
21        alert(rows[1].cells[0].innerHTML) ;
22    }
23    function deleteRow(){ //删除最后一行
24        var t1 = document.getElementById('t1') ;
25        var rows = t1.rows ;
26        t1.deleteRow(rows.length-1) ;
27    }
28    function insertRow(){ //在最后一行添加一行
29        var t1 = document.getElementById('t1') ;
30        var rows = t1.rows ;
31        var newRow = t1.insertRow(rows.length) ;
32        newRow.insertCell(0).innerHTML = "11&nbsp;" ;
33        newRow.insertCell(1).innerHTML = "31&nbsp;" ;
34    }
35
36</script>
37</head>
38
39<body>
40
41<table id="t1" width="200" border="1" cellspacing="0" cellpadding="0">
42  <tr>
43    <td>0,0</td>
44    <td>&nbsp;</td>
45  </tr>
46  <tr>
47    <td>1,0</td>
48    <td>&nbsp;</td>
49  </tr>
50  <tr>
51    <td>2,0</td>
52    <td>&nbsp;</td>
53  </tr>
54  <tr>
55    <td>3,0</td>
56    <td>&nbsp;</td>
57  </tr>
58</table>
59<p>&nbsp;</p>
60<p>
61  <input type="button" value="click" onclick="testTable();"  />
62</p>
63<p><br />
64  <input type="button" value="delete row" onclick="deleteRow()" /> 
65  <br />
66  <input type="button" value="insert row" onclick="insertRow()" />
67</p>
68<p>&nbsp;</p>
69</body>
70</html>
71
下图是显示效果


zeroline 2010-11-11 22:33 发表评论
]]>JavaScript中复选框的全选和反选功能的实现http://www.blogjava.net/zeroline/archive/2010/11/11/337847.htmlzerolinezerolineThu, 11 Nov 2010 13:58:00 GMThttp://www.blogjava.net/zeroline/archive/2010/11/11/337847.htmlhttp://www.blogjava.net/zeroline/comments/337847.htmlhttp://www.blogjava.net/zeroline/archive/2010/11/11/337847.html#Feedback0http://www.blogjava.net/zeroline/comments/commentRss/337847.htmlhttp://www.blogjava.net/zeroline/services/trackbacks/337847.html
 1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">     
 2<html>     
 3    <head>     
 4        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     
 5        <title>Test CheckBox</title>     
 6        <style type="text/css">     
 7            body{      
 8                font-family:Courier;      
 9            }      
10        </style>     
11        <script type="text/javascript">     
12            function checkAll(){      
13                var checkAll = document.getElementById('chkAll') ;      
14                var checkBox = document.getElementById('checkBox') ;      
15                var arr = new Array() ;      
16                arr = checkBox.getElementsByTagName('input') ;      
17                if(checkAll.checked==true){  //checkAll selected      
18                    for(i=0; i<arr.length; i++){      
19                        arr[i].checked = true ;       
20                    }      
21                }      
22                if(checkAll.checked==false){      
23                    for(i=0; i<arr.length; i++){      
24                        arr[i].checked = false ;          
25                    }      
26                }      
27     
28            }      
29            function checkCancel(){      
30                var checkCancel = document.getElementById('chkCancel') ;      
31                var checkBox = document.getElementById('checkBox') ;      
32                var arr = new Array() ;      
33                arr = checkBox.getElementsByTagName('input') ;      
34                if(checkCancel.checked==true){ //checkCancel selected      
35                    for(i=0; i<arr.length; i++){      
36                        if(arr[i].checked == true){      
37                            arr[i].checked = false ;      
38                        }else {      
39                            arr[i].checked = true ;      
40                        }         
41                    }      
42                }      
43            }      
44        </script>     
45    </head>     
46    <body>     
47              
48        <input type="checkbox" id="chkAll" onclick="checkAll()"/> check All <br/>     
49        <input type="checkbox" id="chkCancel" onclick="checkCancel()"/> check Cancel <br/>     
50            <br />          
51        <div id="checkBox">     
52        <input type="checkbox" id="chk1"/> 1 <br/>     
53        <input type="checkbox" id="chk2"/> 2 <br/>     
54        <input type="checkbox" id="chk3"/> 3 <br/>     
55        <input type="checkbox" id="chk4"/> 4 <br/>     
56        <input type="checkbox" id="chk5"/> 5 <br/>     
57        </div>     
58    </body>     
59</html>    
60

下图是显示效果



zeroline 2010-11-11 21:58 发表评论
]]>