js 正则
javascript/jQuery • lopo1983 发表了文章 • 0 个评论 • 1380 次浏览 • 2017-03-03 15:03
?
?
匹配中文字符的正则表达式： [u4e00-u9fa5]
评注：匹配中文还真是个头疼的事，有了这个表达式就好办了
匹配双字节字符(包括汉字在内)：[^x00-xff]
评注：可以用来计算字符串的长度（一个双字节字符长度计2，ASCII字符计1）
匹配空白行的正则表达式：ns*r
评注：可以用来删除空白行
匹配HTML标记的正则表达式：< (S*?)[^>]*>.*?|< .*? />
评注：网上流传的版本太糟糕，上面这个也仅仅能匹配部分，对于复杂的嵌套标记依旧无能为力
匹配首尾空白字符的正则表达式：^s*|s*$
评注：可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式
匹配Email地址的正则表达式：w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*
评注：表单验证时很实用
匹配网址URL的正则表达式：[a-zA-z]+://[^s]*
评注：网上流传的版本功能很有限，上面这个基本可以满足需求
匹配帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$
评注：表单验证时很实用
匹配国内电话号码：d{3}-d{8}|d{4}-d{7}
评注：匹配形式如 0511-4405222 或 021-87888822
匹配腾讯QQ号：[1-9][0-9]{4,}
评注：腾讯QQ号从10000开始
匹配中国邮政编码：[1-9]d{5}(?!d)
评注：中国邮政编码为6位数字
匹配身份证：d{15}|d{18}
评注：中国的身份证为15位或18位
匹配ip地址：d+.d+.d+.d+
评注：提取ip地址时有用
匹配特定数字：
^[1-9]d*$ //匹配正整数
^-[1-9]d*$ //匹配负整数
^-?[1-9]d*$ //匹配整数
^[1-9]d*|0$ //匹配非负整数（正整数 + 0）
^-[1-9]d*|0$ //匹配非正整数（负整数 + 0）
^[1-9]d*.d*|0.d*[1-9]d*$ //匹配正浮点数
^-([1-9]d*.d*|0.d*[1-9]d*)$ //匹配负浮点数
^-?([1-9]d*.d*|0.d*[1-9]d*|0?.0+|0)$ //匹配浮点数
^[1-9]d*.d*|0.d*[1-9]d*|0?.0+|0$ //匹配非负浮点数（正浮点数 + 0）
^(-([1-9]d*.d*|0.d*[1-9]d*))|0?.0+|0$ //匹配非正浮点数（负浮点数 + 0）
评注：处理大量数据时有用，具体应用时注意修正
匹配特定字符串：
^[A-Za-z]+$ //匹配由26个英文字母组成的字符串
^[A-Z]+$ //匹配由26个英文字母的大写组成的字符串
^[a-z]+$ //匹配由26个英文字母的小写组成的字符串
^[A-Za-z0-9]+$ //匹配由数字和26个英文字母组成的字符串
^w+$ //匹配由数字、26个英文字母或者下划线组成的字符串
在使用RegularExpressionValidator验证控件时的验证功能及其验证表达式介绍如下:
只能输入数字：“^[0-9]*$”
只能输入n位的数字：“^d{n}$”
只能输入至少n位数字：“^d{n,}$”
只能输入m-n位的数字：“^d{m,n}$”
只能输入零和非零开头的数字：“^(0|[1-9][0-9]*)$”
只能输入有两位小数的正实数：“^[0-9]+(.[0-9]{2})?$”
只能输入有1-3位小数的正实数：“^[0-9]+(.[0-9]{1,3})?$”
只能输入非零的正整数：“^+?[1-9][0-9]*$”
只能输入非零的负整数：“^-[1-9][0-9]*$”
只能输入长度为3的字符：“^.{3}$”
只能输入由26个英文字母组成的字符串：“^[A-Za-z]+$”
只能输入由26个大写英文字母组成的字符串：“^[A-Z]+$”
只能输入由26个小写英文字母组成的字符串：“^[a-z]+$”
只能输入由数字和26个英文字母组成的字符串：“^[A-Za-z0-9]+$”
只能输入由数字、26个英文字母或者下划线组成的字符串：“^w+$”
验证用户密码:“^[a-zA-Z]w{5,17}$”正确格式为：以字母开头，长度在6-18之间，
只能包含字符、数字和下划线。
验证是否含有^%&’,;=?$”等字符：“[^%&',;=?$x22]+”
只能输入汉字：“^[u4e00-u9fa5],{0,}$”
验证Email地址：“^w+[-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$”
验证InternetURL：“^http://([w-]+.)+[w-]+(/[w-./?%&=]*)?$”
验证电话号码：“^((d{3,4})|d{3,4}-)?d{7,8}$”
正确格式为：“XXXX-XXXXXXX”，“XXXX-XXXXXXXX”，“XXX-XXXXXXX”，
“XXX-XXXXXXXX”，“XXXXXXX”，“XXXXXXXX”。
验证身份证号（15位或18位数字）：“^d{15}|d{}18$”
验证一年的12个月：“^(0?[1-9]|1[0-2])$”正确格式为：“01”-“09”和“1”“12”
验证一个月的31天：“^((0?[1-9])|((1|2)[0-9])|30|31)$”
正确格式为：“01”“09”和“1”“31”。
匹配中文字符的正则表达式： [u4e00-u9fa5]
匹配双字节字符(包括汉字在内)：[^x00-xff]
匹配空行的正则表达式：n[s| ]*r
匹配HTML标记的正则表达式：/< (.*)>.*|< (.*) />/
匹配首尾空格的正则表达式：(^s*)|(s*$)
匹配Email地址的正则表达式：w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*
匹配网址URL的正则表达式：http://([w-]+.)+[w-]+(/[w- ./?%&=]*)?
(1)应用：计算字符串的长度（一个双字节字符长度计2，ASCII字符计1）
String.prototype.len=function(){return this.replace([^x00-xff]/g,”aa”).length;}
(2)应用：javascript中没有像vbscript那样的trim函数，我们就可以利用这个表达式来实现
String.prototype.trim = function()
{
return this.replace(/(^s*)|(s*$)/g, “”);
}
(3)应用：利用正则表达式分解和转换IP地址
function IP2V(ip) //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!”)
}
}
(4)应用：从URL地址中提取文件名的javascript程序
s=”http://www.9499.net/page1.htm”;
s=s.replace(/(.*/){0,}([^.]+).*/ig,”$2″) ; //Page1.htm
(5)应用：利用正则表达式限制网页表单里的文本框输入内容
用正则表达式限制只能输入中文：onkeyup=”value=”/blog/value.replace(/["^u4E00-u9FA5]/g,”) ” onbeforepaste=”clipboardData.setData(’text’,clipboardData.getData(’text’).replace(/[^u4E00-u9FA5]/g,”))”
用正则表达式限制只能输入全角字符： onkeyup=”value=”/blog/value.replace(/["^uFF00-uFFFF]/g,”) ” onbeforepaste=”clipboardData.setData(’text’,clipboardData.getData(’text’).replace(/[^uFF00-uFFFF]/g,”))”
用正则表达式限制只能输入数字：onkeyup=”value=”/blog/value.replace(/["^d]/g,”) “onbeforepaste= “clipboardData.setData(’text’,clipboardData.getData(’text’).replace(/[^d]/g,”))”
用正则表达式限制只能输入数字和英文：onkeyup=”value=”/blog/value.replace(/[W]/g,””) “onbeforepaste=”clipboardData.setData(’text’,clipboardData.getData(’text’).replace(/[^d]/g,”
var a=" 文字文字文字 "; a.replace(/ /g,'')
? 查看全部
?
匹配中文字符的正则表达式： [u4e00-u9fa5]
评注：匹配中文还真是个头疼的事，有了这个表达式就好办了
匹配双字节字符(包括汉字在内)：[^x00-xff]
评注：可以用来计算字符串的长度（一个双字节字符长度计2，ASCII字符计1）
匹配空白行的正则表达式：ns*r
评注：可以用来删除空白行
匹配HTML标记的正则表达式：< (S*?)[^>]*>.*?|< .*? />
评注：网上流传的版本太糟糕，上面这个也仅仅能匹配部分，对于复杂的嵌套标记依旧无能为力
匹配首尾空白字符的正则表达式：^s*|s*$
评注：可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式
匹配Email地址的正则表达式：w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*
评注：表单验证时很实用
匹配网址URL的正则表达式：[a-zA-z]+://[^s]*
评注：网上流传的版本功能很有限，上面这个基本可以满足需求
匹配帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$
评注：表单验证时很实用
匹配国内电话号码：d{3}-d{8}|d{4}-d{7}
评注：匹配形式如 0511-4405222 或 021-87888822
匹配腾讯QQ号：[1-9][0-9]{4,}
评注：腾讯QQ号从10000开始
匹配中国邮政编码：[1-9]d{5}(?!d)
评注：中国邮政编码为6位数字
匹配身份证：d{15}|d{18}
评注：中国的身份证为15位或18位
匹配ip地址：d+.d+.d+.d+
评注：提取ip地址时有用
匹配特定数字：
^[1-9]d*$ //匹配正整数
^-[1-9]d*$ //匹配负整数
^-?[1-9]d*$ //匹配整数
^[1-9]d*|0$ //匹配非负整数（正整数 + 0）
^-[1-9]d*|0$ //匹配非正整数（负整数 + 0）
^[1-9]d*.d*|0.d*[1-9]d*$ //匹配正浮点数
^-([1-9]d*.d*|0.d*[1-9]d*)$ //匹配负浮点数
^-?([1-9]d*.d*|0.d*[1-9]d*|0?.0+|0)$ //匹配浮点数
^[1-9]d*.d*|0.d*[1-9]d*|0?.0+|0$ //匹配非负浮点数（正浮点数 + 0）
^(-([1-9]d*.d*|0.d*[1-9]d*))|0?.0+|0$ //匹配非正浮点数（负浮点数 + 0）
评注：处理大量数据时有用，具体应用时注意修正
匹配特定字符串：
^[A-Za-z]+$ //匹配由26个英文字母组成的字符串
^[A-Z]+$ //匹配由26个英文字母的大写组成的字符串
^[a-z]+$ //匹配由26个英文字母的小写组成的字符串
^[A-Za-z0-9]+$ //匹配由数字和26个英文字母组成的字符串
^w+$ //匹配由数字、26个英文字母或者下划线组成的字符串
在使用RegularExpressionValidator验证控件时的验证功能及其验证表达式介绍如下:
只能输入数字：“^[0-9]*$”
只能输入n位的数字：“^d{n}$”
只能输入至少n位数字：“^d{n,}$”
只能输入m-n位的数字：“^d{m,n}$”
只能输入零和非零开头的数字：“^(0|[1-9][0-9]*)$”
只能输入有两位小数的正实数：“^[0-9]+(.[0-9]{2})?$”
只能输入有1-3位小数的正实数：“^[0-9]+(.[0-9]{1,3})?$”
只能输入非零的正整数：“^+?[1-9][0-9]*$”
只能输入非零的负整数：“^-[1-9][0-9]*$”
只能输入长度为3的字符：“^.{3}$”
只能输入由26个英文字母组成的字符串：“^[A-Za-z]+$”
只能输入由26个大写英文字母组成的字符串：“^[A-Z]+$”
只能输入由26个小写英文字母组成的字符串：“^[a-z]+$”
只能输入由数字和26个英文字母组成的字符串：“^[A-Za-z0-9]+$”
只能输入由数字、26个英文字母或者下划线组成的字符串：“^w+$”
验证用户密码:“^[a-zA-Z]w{5,17}$”正确格式为：以字母开头，长度在6-18之间，
只能包含字符、数字和下划线。
验证是否含有^%&’,;=?$”等字符：“[^%&',;=?$x22]+”
只能输入汉字：“^[u4e00-u9fa5],{0,}$”
验证Email地址：“^w+[-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$”
验证InternetURL：“^http://([w-]+.)+[w-]+(/[w-./?%&=]*)?$”
验证电话号码：“^((d{3,4})|d{3,4}-)?d{7,8}$”
正确格式为：“XXXX-XXXXXXX”，“XXXX-XXXXXXXX”，“XXX-XXXXXXX”，
“XXX-XXXXXXXX”，“XXXXXXX”，“XXXXXXXX”。
验证身份证号（15位或18位数字）：“^d{15}|d{}18$”
验证一年的12个月：“^(0?[1-9]|1[0-2])$”正确格式为：“01”-“09”和“1”“12”
验证一个月的31天：“^((0?[1-9])|((1|2)[0-9])|30|31)$”
正确格式为：“01”“09”和“1”“31”。
匹配中文字符的正则表达式： [u4e00-u9fa5]
匹配双字节字符(包括汉字在内)：[^x00-xff]
匹配空行的正则表达式：n[s| ]*r
匹配HTML标记的正则表达式：/< (.*)>.*|< (.*) />/
匹配首尾空格的正则表达式：(^s*)|(s*$)
匹配Email地址的正则表达式：w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*
匹配网址URL的正则表达式：http://([w-]+.)+[w-]+(/[w- ./?%&=]*)?
(1)应用：计算字符串的长度（一个双字节字符长度计2，ASCII字符计1）
String.prototype.len=function(){return this.replace([^x00-xff]/g,”aa”).length;}
(2)应用：javascript中没有像vbscript那样的trim函数，我们就可以利用这个表达式来实现
String.prototype.trim = function()
{
return this.replace(/(^s*)|(s*$)/g, “”);
}
(3)应用：利用正则表达式分解和转换IP地址
function IP2V(ip) //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!”)
}
}
(4)应用：从URL地址中提取文件名的javascript程序
s=”http://www.9499.net/page1.htm”;
s=s.replace(/(.*/){0,}([^.]+).*/ig,”$2″) ; //Page1.htm
(5)应用：利用正则表达式限制网页表单里的文本框输入内容
用正则表达式限制只能输入中文：onkeyup=”value=”/blog/value.replace(/["^u4E00-u9FA5]/g,”) ” onbeforepaste=”clipboardData.setData(’text’,clipboardData.getData(’text’).replace(/[^u4E00-u9FA5]/g,”))”
用正则表达式限制只能输入全角字符： onkeyup=”value=”/blog/value.replace(/["^uFF00-uFFFF]/g,”) ” onbeforepaste=”clipboardData.setData(’text’,clipboardData.getData(’text’).replace(/[^uFF00-uFFFF]/g,”))”
用正则表达式限制只能输入数字：onkeyup=”value=”/blog/value.replace(/["^d]/g,”) “onbeforepaste= “clipboardData.setData(’text’,clipboardData.getData(’text’).replace(/[^d]/g,”))”
用正则表达式限制只能输入数字和英文：onkeyup=”value=”/blog/value.replace(/[W]/g,””) “onbeforepaste=”clipboardData.setData(’text’,clipboardData.getData(’text’).replace(/[^d]/g,”
var a=" 文字文字文字 "; a.replace(/ /g,'')
? 查看全部
?
?
匹配中文字符的正则表达式： [u4e00-u9fa5]
评注：匹配中文还真是个头疼的事，有了这个表达式就好办了
匹配双字节字符(包括汉字在内)：[^x00-xff]
评注：可以用来计算字符串的长度（一个双字节字符长度计2，ASCII字符计1）
匹配空白行的正则表达式：ns*r
评注：可以用来删除空白行
匹配HTML标记的正则表达式：< (S*?)[^>]*>.*?|< .*? />
评注：网上流传的版本太糟糕，上面这个也仅仅能匹配部分，对于复杂的嵌套标记依旧无能为力
匹配首尾空白字符的正则表达式：^s*|s*$
评注：可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式
匹配Email地址的正则表达式：w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*
评注：表单验证时很实用
匹配网址URL的正则表达式：[a-zA-z]+://[^s]*
评注：网上流传的版本功能很有限，上面这个基本可以满足需求
匹配帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$
评注：表单验证时很实用
匹配国内电话号码：d{3}-d{8}|d{4}-d{7}
评注：匹配形式如 0511-4405222 或 021-87888822
匹配腾讯QQ号：[1-9][0-9]{4,}
评注：腾讯QQ号从10000开始
匹配中国邮政编码：[1-9]d{5}(?!d)
评注：中国邮政编码为6位数字
匹配身份证：d{15}|d{18}
评注：中国的身份证为15位或18位
匹配ip地址：d+.d+.d+.d+
评注：提取ip地址时有用
匹配特定数字：
^[1-9]d*$ //匹配正整数
^-[1-9]d*$ //匹配负整数
^-?[1-9]d*$ //匹配整数
^[1-9]d*|0$ //匹配非负整数（正整数 + 0）
^-[1-9]d*|0$ //匹配非正整数（负整数 + 0）
^[1-9]d*.d*|0.d*[1-9]d*$ //匹配正浮点数
^-([1-9]d*.d*|0.d*[1-9]d*)$ //匹配负浮点数
^-?([1-9]d*.d*|0.d*[1-9]d*|0?.0+|0)$ //匹配浮点数
^[1-9]d*.d*|0.d*[1-9]d*|0?.0+|0$ //匹配非负浮点数（正浮点数 + 0）
^(-([1-9]d*.d*|0.d*[1-9]d*))|0?.0+|0$ //匹配非正浮点数（负浮点数 + 0）
评注：处理大量数据时有用，具体应用时注意修正
匹配特定字符串：
^[A-Za-z]+$ //匹配由26个英文字母组成的字符串
^[A-Z]+$ //匹配由26个英文字母的大写组成的字符串
^[a-z]+$ //匹配由26个英文字母的小写组成的字符串
^[A-Za-z0-9]+$ //匹配由数字和26个英文字母组成的字符串
^w+$ //匹配由数字、26个英文字母或者下划线组成的字符串
在使用RegularExpressionValidator验证控件时的验证功能及其验证表达式介绍如下:
只能输入数字：“^[0-9]*$”
只能输入n位的数字：“^d{n}$”
只能输入至少n位数字：“^d{n,}$”
只能输入m-n位的数字：“^d{m,n}$”
只能输入零和非零开头的数字：“^(0|[1-9][0-9]*)$”
只能输入有两位小数的正实数：“^[0-9]+(.[0-9]{2})?$”
只能输入有1-3位小数的正实数：“^[0-9]+(.[0-9]{1,3})?$”
只能输入非零的正整数：“^+?[1-9][0-9]*$”
只能输入非零的负整数：“^-[1-9][0-9]*$”
只能输入长度为3的字符：“^.{3}$”
只能输入由26个英文字母组成的字符串：“^[A-Za-z]+$”
只能输入由26个大写英文字母组成的字符串：“^[A-Z]+$”
只能输入由26个小写英文字母组成的字符串：“^[a-z]+$”
只能输入由数字和26个英文字母组成的字符串：“^[A-Za-z0-9]+$”
只能输入由数字、26个英文字母或者下划线组成的字符串：“^w+$”
验证用户密码:“^[a-zA-Z]w{5,17}$”正确格式为：以字母开头，长度在6-18之间，
只能包含字符、数字和下划线。
验证是否含有^%&’,;=?$”等字符：“[^%&',;=?$x22]+”
只能输入汉字：“^[u4e00-u9fa5],{0,}$”
验证Email地址：“^w+[-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$”
验证InternetURL：“^http://([w-]+.)+[w-]+(/[w-./?%&=]*)?$”
验证电话号码：“^((d{3,4})|d{3,4}-)?d{7,8}$”
正确格式为：“XXXX-XXXXXXX”，“XXXX-XXXXXXXX”，“XXX-XXXXXXX”，
“XXX-XXXXXXXX”，“XXXXXXX”，“XXXXXXXX”。
验证身份证号（15位或18位数字）：“^d{15}|d{}18$”
验证一年的12个月：“^(0?[1-9]|1[0-2])$”正确格式为：“01”-“09”和“1”“12”
验证一个月的31天：“^((0?[1-9])|((1|2)[0-9])|30|31)$”
正确格式为：“01”“09”和“1”“31”。
匹配中文字符的正则表达式： [u4e00-u9fa5]
匹配双字节字符(包括汉字在内)：[^x00-xff]
匹配空行的正则表达式：n[s| ]*r
匹配HTML标记的正则表达式：/< (.*)>.*|< (.*) />/
匹配首尾空格的正则表达式：(^s*)|(s*$)
匹配Email地址的正则表达式：w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*
匹配网址URL的正则表达式：http://([w-]+.)+[w-]+(/[w- ./?%&=]*)?
(1)应用：计算字符串的长度（一个双字节字符长度计2，ASCII字符计1）
String.prototype.len=function(){return this.replace([^x00-xff]/g,”aa”).length;}
(2)应用：javascript中没有像vbscript那样的trim函数，我们就可以利用这个表达式来实现
String.prototype.trim = function()
{
return this.replace(/(^s*)|(s*$)/g, “”);
}
(3)应用：利用正则表达式分解和转换IP地址
function IP2V(ip) //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!”)
}
}
(4)应用：从URL地址中提取文件名的javascript程序
s=”http://www.9499.net/page1.htm”;
s=s.replace(/(.*/){0,}([^.]+).*/ig,”$2″) ; //Page1.htm
(5)应用：利用正则表达式限制网页表单里的文本框输入内容
用正则表达式限制只能输入中文：onkeyup=”value=”/blog/value.replace(/["^u4E00-u9FA5]/g,”) ” onbeforepaste=”clipboardData.setData(’text’,clipboardData.getData(’text’).replace(/[^u4E00-u9FA5]/g,”))”
用正则表达式限制只能输入全角字符： onkeyup=”value=”/blog/value.replace(/["^uFF00-uFFFF]/g,”) ” onbeforepaste=”clipboardData.setData(’text’,clipboardData.getData(’text’).replace(/[^uFF00-uFFFF]/g,”))”
用正则表达式限制只能输入数字：onkeyup=”value=”/blog/value.replace(/["^d]/g,”) “onbeforepaste= “clipboardData.setData(’text’,clipboardData.getData(’text’).replace(/[^d]/g,”))”
用正则表达式限制只能输入数字和英文：onkeyup=”value=”/blog/value.replace(/[W]/g,””) “onbeforepaste=”clipboardData.setData(’text’,clipboardData.getData(’text’).replace(/[^d]/g,”
var a=" 文字文字文字 "; a.replace(/ /g,'')
?
js 数组对象去重
javascript/jQuery • lopo1983 发表了文章 • 0 个评论 • 1473 次浏览 • 2017-03-02 15:52
var term_gpa = [ { year: '2013-2014', term: '1' },
{ year: '2013-2014', term: '1' },
{ year: '2013-2014', term: '1' },
{ year: '2013-2014', term: '1' },
{ year: '2013-2014', term: '1' },
{ year: '2013-2014', term: '1' },
{ year: '2013-2014', term: '1' },
{ year: '2013-2014', term: '1' },
{ year: '2013-2014', term: '1' },
{ year: '2013-2014', term: '2' },
{ year: '2013-2014', term: '2' },
{ year: '2013-2014', term: '2' },
{ year: '2013-2014', term: '2' },
{ year: '2013-2014', term: '2' },
{ year: '2013-2014', term: '2' },
{ year: '2013-2014', term: '2' },
{ year: '2013-2014', term: '2' },
{ year: '2013-2014', term: '2' },
{ year: '2013-2014', term: '2' },
{ year: '2013-2014', term: '2' },
{ year: '2013-2014', term: '2' },
{ year: '2014-2015', term: '1' },
{ year: '2014-2015', term: '1' },
{ year: '2014-2015', term: '1' },
{ year: '2014-2015', term: '1' },
{ year: '2014-2015', term: '1' },
{ year: '2014-2015', term: '1' },
{ year: '2014-2015', term: '1' },
{ year: '2014-2015', term: '1' },
{ year: '2014-2015', term: '1' },
{ year: '2014-2015', term: '1' },
{ year: '2014-2015', term: '1' },
{ year: '2014-2015', term: '1' },
{ year: '2014-2015', term: '1' },
{ year: '2014-2015', term: '1' } ]
var unique = {};
term_gpa.forEach(gpa=>{ unique[ JSON.stringify(gpa) ] = gpa });
term_gpa = Object.keys(unique).map(u=>{return JSON.parse(u) }); 查看全部
{ year: '2013-2014', term: '1' },
{ year: '2013-2014', term: '1' },
{ year: '2013-2014', term: '1' },
{ year: '2013-2014', term: '1' },
{ year: '2013-2014', term: '1' },
{ year: '2013-2014', term: '1' },
{ year: '2013-2014', term: '1' },
{ year: '2013-2014', term: '1' },
{ year: '2013-2014', term: '2' },
{ year: '2013-2014', term: '2' },
{ year: '2013-2014', term: '2' },
{ year: '2013-2014', term: '2' },
{ year: '2013-2014', term: '2' },
{ year: '2013-2014', term: '2' },
{ year: '2013-2014', term: '2' },
{ year: '2013-2014', term: '2' },
{ year: '2013-2014', term: '2' },
{ year: '2013-2014', term: '2' },
{ year: '2013-2014', term: '2' },
{ year: '2013-2014', term: '2' },
{ year: '2014-2015', term: '1' },
{ year: '2014-2015', term: '1' },
{ year: '2014-2015', term: '1' },
{ year: '2014-2015', term: '1' },
{ year: '2014-2015', term: '1' },
{ year: '2014-2015', term: '1' },
{ year: '2014-2015', term: '1' },
{ year: '2014-2015', term: '1' },
{ year: '2014-2015', term: '1' },
{ year: '2014-2015', term: '1' },
{ year: '2014-2015', term: '1' },
{ year: '2014-2015', term: '1' },
{ year: '2014-2015', term: '1' },
{ year: '2014-2015', term: '1' } ]
var unique = {};
term_gpa.forEach(gpa=>{ unique[ JSON.stringify(gpa) ] = gpa });
term_gpa = Object.keys(unique).map(u=>{return JSON.parse(u) }); 查看全部
var term_gpa = [ { year: '2013-2014', term: '1' },
{ year: '2013-2014', term: '1' },
{ year: '2013-2014', term: '1' },
{ year: '2013-2014', term: '1' },
{ year: '2013-2014', term: '1' },
{ year: '2013-2014', term: '1' },
{ year: '2013-2014', term: '1' },
{ year: '2013-2014', term: '1' },
{ year: '2013-2014', term: '1' },
{ year: '2013-2014', term: '2' },
{ year: '2013-2014', term: '2' },
{ year: '2013-2014', term: '2' },
{ year: '2013-2014', term: '2' },
{ year: '2013-2014', term: '2' },
{ year: '2013-2014', term: '2' },
{ year: '2013-2014', term: '2' },
{ year: '2013-2014', term: '2' },
{ year: '2013-2014', term: '2' },
{ year: '2013-2014', term: '2' },
{ year: '2013-2014', term: '2' },
{ year: '2013-2014', term: '2' },
{ year: '2014-2015', term: '1' },
{ year: '2014-2015', term: '1' },
{ year: '2014-2015', term: '1' },
{ year: '2014-2015', term: '1' },
{ year: '2014-2015', term: '1' },
{ year: '2014-2015', term: '1' },
{ year: '2014-2015', term: '1' },
{ year: '2014-2015', term: '1' },
{ year: '2014-2015', term: '1' },
{ year: '2014-2015', term: '1' },
{ year: '2014-2015', term: '1' },
{ year: '2014-2015', term: '1' },
{ year: '2014-2015', term: '1' },
{ year: '2014-2015', term: '1' } ]
var unique = {};
term_gpa.forEach(gpa=>{ unique[ JSON.stringify(gpa) ] = gpa });
term_gpa = Object.keys(unique).map(u=>{return JSON.parse(u) });
捐献专用
bootstrap3.x • lopo1983 发表了文章 • 0 个评论 • 2260 次浏览 • 2017-02-17 16:20
捐献主要用于群和网站相关费用开支 相关开支 将以透明的方式发布出来
除去开支外若有结余? 将展开各种活动以各种书籍 谢谢大家支持?
?
捐献后请私聊我 并截图捐献信息 我将列入以下列表
?
排名 不分先后
2017 年度
熊猫 ￥?1.00
雪原 ￥?1.00
美人鱼 ￥?1.00
大头 ￥?1.00
小妖 ￥?1.00
戏子 ￥?1.00
LYa0 ￥?1.00
pp ￥?1.00
柏龙 ￥?1.00
帮主 ￥6.00
小妖 ￥5.00
重庆小付 ￥5.55
大师傅 ?￥66.66
轮子 ?￥8.88
龙柏 ￥ 6.66
成都-尤里 ￥13.00
深圳糖糖 ￥2.00
天津-菜鸟笑画 ￥5.00
成都-银子 ￥6.66
成都-kris ￥6.66
广东-翔子 ￥8.88
?
2018 查看全部
除去开支外若有结余? 将展开各种活动以各种书籍 谢谢大家支持?
?
捐献后请私聊我 并截图捐献信息 我将列入以下列表
?
排名 不分先后
2017 年度
熊猫 ￥?1.00
雪原 ￥?1.00
美人鱼 ￥?1.00
大头 ￥?1.00
小妖 ￥?1.00
戏子 ￥?1.00
LYa0 ￥?1.00
pp ￥?1.00
柏龙 ￥?1.00
帮主 ￥6.00
小妖 ￥5.00
重庆小付 ￥5.55
大师傅 ?￥66.66
轮子 ?￥8.88
龙柏 ￥ 6.66
成都-尤里 ￥13.00
深圳糖糖 ￥2.00
天津-菜鸟笑画 ￥5.00
成都-银子 ￥6.66
成都-kris ￥6.66
广东-翔子 ￥8.88
?
2018 查看全部
捐献主要用于群和网站相关费用开支 相关开支 将以透明的方式发布出来
除去开支外若有结余? 将展开各种活动以各种书籍 谢谢大家支持?
?
捐献后请私聊我 并截图捐献信息 我将列入以下列表
?
排名 不分先后
2017 年度
熊猫 ￥?1.00
雪原 ￥?1.00
美人鱼 ￥?1.00
大头 ￥?1.00
小妖 ￥?1.00
戏子 ￥?1.00
LYa0 ￥?1.00
pp ￥?1.00
柏龙 ￥?1.00
帮主 ￥6.00
小妖 ￥5.00
重庆小付 ￥5.55
大师傅 ?￥66.66
轮子 ?￥8.88
龙柏 ￥ 6.66
成都-尤里 ￥13.00
深圳糖糖 ￥2.00
天津-菜鸟笑画 ￥5.00
成都-银子 ￥6.66
成都-kris ￥6.66
广东-翔子 ￥8.88
?
2018
除去开支外若有结余? 将展开各种活动以各种书籍 谢谢大家支持?
?
捐献后请私聊我 并截图捐献信息 我将列入以下列表
?
排名 不分先后
2017 年度
熊猫 ￥?1.00
雪原 ￥?1.00
美人鱼 ￥?1.00
大头 ￥?1.00
小妖 ￥?1.00
戏子 ￥?1.00
LYa0 ￥?1.00
pp ￥?1.00
柏龙 ￥?1.00
帮主 ￥6.00
小妖 ￥5.00
重庆小付 ￥5.55
大师傅 ?￥66.66
轮子 ?￥8.88
龙柏 ￥ 6.66
成都-尤里 ￥13.00
深圳糖糖 ￥2.00
天津-菜鸟笑画 ￥5.00
成都-银子 ￥6.66
成都-kris ￥6.66
广东-翔子 ￥8.88
?
2018
es6 数组去重
javascript/jQuery • lopo1983 发表了文章 • 0 个评论 • 1449 次浏览 • 2017-02-13 01:10
Array.from(new Set([5,5,6,6,8,]))[...new Set([5,5,6,6,8,])]
- Array.from(new Set([5,5,6,6,8,]))
- [...new Set([5,5,6,6,8,])]
vue 路由keep-alive
javascript/jQuery • lopo1983 发表了文章 • 0 个评论 • 1865 次浏览 • 2017-01-14 22:17
<!-- 这里是需要keepalive的 -->
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<!-- 这里不会被keepalive -->
<router-view v-if="!$route.meta.keepAlive"></router-view>?
路由设置
?
routes: [{
name: 'warp',
path: '/warp',
component: warp,
meta:{keepAlive:true}
}, {
name: 'grid',
path: '/grid',
component: grid,
meta:{keepAlive:true}
}, {
name: 'forms',
path: '/forms',
component: forms,
meta:{keepAlive:false}
}
] 查看全部
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<!-- 这里不会被keepalive -->
<router-view v-if="!$route.meta.keepAlive"></router-view>?
路由设置
?
routes: [{
name: 'warp',
path: '/warp',
component: warp,
meta:{keepAlive:true}
}, {
name: 'grid',
path: '/grid',
component: grid,
meta:{keepAlive:true}
}, {
name: 'forms',
path: '/forms',
component: forms,
meta:{keepAlive:false}
}
] 查看全部
<!-- 这里是需要keepalive的 -->?
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<!-- 这里不会被keepalive -->
<router-view v-if="!$route.meta.keepAlive"></router-view>
路由设置
?
routes: [{
name: 'warp',
path: '/warp',
component: warp,
meta:{keepAlive:true}
}, {
name: 'grid',
path: '/grid',
component: grid,
meta:{keepAlive:true}
}, {
name: 'forms',
path: '/forms',
component: forms,
meta:{keepAlive:false}
}
]
bsf-vue
bootstrap3.x • lopo1983 发表了文章 • 0 个评论 • 1808 次浏览 • 2017-01-09 01:35
之前在coding上有开源的大狗头bootstrap 扩展
因为需要将在近期发布bsf-vue版本
敬请大家期待?
谢谢
因为需要将在近期发布bsf-vue版本
敬请大家期待?
谢谢
之前在coding上有开源的大狗头bootstrap 扩展
因为需要将在近期发布bsf-vue版本
敬请大家期待?
谢谢
因为需要将在近期发布bsf-vue版本
敬请大家期待?
谢谢
外资游戏企业招聘HTML5工程师(无需外语)坐标：泰国-曼谷
回复求职招聘 • Webhorse 发起了问题 • 0 人关注 • 0 个回复 • 3181 次浏览 • 2016-12-28 13:41
bootstrap step vue版
bootstrap3.x • lopo1983 发表了文章 • 0 个评论 • 1775 次浏览 • 2016-12-23 01:54
<template id="template_step">
<ul class="nav nav-pills nav-justified step" :class="[className]">
<li v-for="(n,index) in list" :class="{'active': n <= step }">
<a @click="select(index)">step{{ n }}</a>
</li>
</ul>
</template>
<div id="app" class="container">
<step :list="5" :current="2" theme="progress"></step>
<step :list="5" :current="3" theme="round"></step>
<step :list="5" :current="1" theme="square"></step>
<step :list="5" :current="2" theme="arrow"></step>
</div>
<script>
const map = {
progress:'step-progress',
round:'step-round',
square:'step-square',
arrow:'step-arrow'
}
Vue.component('step',{
template:'#template_step',
props:['list','theme','current'],
data(){
return {
step:1
}
},
computed:{
className(){
return map[this.theme]
}
},
methods:{
select(idx){
this.step = idx + 1
}
},
mounted(){
this.step = typeof this.current != undefined ? this.current : 1
}
})
new Vue({
el:'#app'
})
</script>
.step {
counter-reset: flag;
}
.step li {
position: relative;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}
.step li a {
cursor: pointer;
padding: 10px 15px;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}
.step li a:before {
content: counter(flag);
counter-increment: flag;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}
.step li a:after {
content: "";
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}
.step-arrow {
margin: 20px 0;
}
.step-arrow.unhover li a:hover,
.step-arrow.unhover li a:focus {
background-color: #f6f6f6;
color: #444444;
}
.step-arrow.unhover li a:hover:before,
.step-arrow.unhover li a:focus:before {
background-color: #d2d2d2;
color: #ffffff;
}
.step-arrow.unhover li:not(:last-child) a:hover:after,
.step-arrow.unhover li:not(:last-child) a:focus:after {
background-color: #f6f6f6;
}
.step-arrow li {
padding-right: 20px;
}
.step-arrow li:last-child {
padding-right: 0;
}
.step-arrow li:nth-child(n+2) a {
margin-left: -20px;
border-radius: 0;
}
.step-arrow li:not(:last-child) a:after {
position: absolute;
top: -1px;
right: -20px;
width: 40px;
height: 40px;
transform: scale(0.707) rotate(45deg);
z-index: 1;
background-color: #f6f6f6;
border-radius: 0 5px 0 50px;
border-top: 1px solid #ffffff;
border-right: 1px solid #ffffff;
box-sizing: content-box;
}
.step-arrow li:not(:last-child) a:hover:after {
background-color: #00b8f5;
}
.step-arrow li a {
border-radius: 0;
color: #444444;
background-color: #f6f6f6;
}
.step-arrow li a:hover {
background-color: #00b8f5;
color: #ffffff;
}
.step-arrow li a:hover:before {
background: #ffffff;
color: #00b8f5;
}
.step-arrow li a:before {
position: absolute;
z-index: 2;
width: 20px;
height: 20px;
line-height: 20px;
border-radius: 20px;
left: 3rem;
font-weight: bold;
font-size: 1rem;
overflow: hidden;
top: 10px;
background: #d2d2d2;
color: #ffffff;
}
.step-arrow li.active a:before {
background: #ffffff;
color: #00b8f5;
}
.step-arrow li.active a:after {
background-color: #00b8f5;
}
.step-arrow li.active a,
.step-arrow li.active a:hover {
background-color: #00b8f5;
color: #ffffff;
}
.step-arrow li.active a:before,
.step-arrow li.active a:hover:before {
background-color: #ffffff;
color: #00b8f5;
}
.step-arrow li.active a:after,
.step-arrow li.active a:hover:after {
background-color: #00b8f5 !important;
}
.step-square {
margin-top: 40px;
}
.step-square > li:hover a:before,
.step-square > li:active a:before,
.step-square > li.active a:before {
background-color: #00b8f5;
color: #ffffff;
border-color: #00b8f5;
}
.step-square > li:hover a:after,
.step-square > li:active a:after,
.step-square > li.active a:after {
background-color: #00b8f5;
}
.step-square > li:first-child a:after {
left: 50%;
border-right: 1px solid #ffffff;
}
.step-square > li:last-child a:after {
right: 50%;
border-left: 1px solid #ffffff;
}
.step-square > li > a {
color: #ebebeb;
}
.step-square > li > a:hover {
background-color: #ffffff;
color: #00b8f5;
}
.step-square > li > a:before {
position: absolute;
z-index: 2;
top: -2rem;
left: 0;
right: 0;
margin: 0 auto;
width: 2rem;
height: 2rem;
background-color: #ffffff;
line-height: 20px;
border: 1px solid #ebebeb;
}
.step-square > li > a:after {
content: '';
position: absolute;
left: 0;
right: 0;
top: -35%;
background-color: #ebebeb;
z-index: 1;
height: 2px;
border: solid #ffffff;
border-width: 0 1px;
}
.step-square > li.active > a,
.step-square > li.active > a:focus,
.step-square > li.active > a:hover {
color: #00b8f5;
background: transparent;
}
.step-round {
margin-top: 40px;
}
.step-round > li:first-child > a:after {
left: 30%;
border-radius: 5px 0 0 5px;
}
.step-round > li:last-child > a:after {
right: 30%;
border-radius: 0 5px 5px 0;
}
.step-round > li.active > a,
.step-round > li.active > a:hover,
.step-round > li.active > a:focus {
background: transparent;
color: #00b8f5;
}
.step-round > li.active > a:before,
.step-round > li.active > a:hover:before,
.step-round > li.active > a:focus:before {
background-color: #00b8f5;
color: #ffffff;
}
.step-round > li.active > a:after,
.step-round > li.active > a:hover:after,
.step-round > li.active > a:focus:after {
background-color: #00b8f5;
}
.step-round > li > a {
color: #ebebeb;
}
.step-round > li > a:before {
position: absolute;
z-index: 2;
top: -2rem;
left: 0;
right: 0;
margin: 0 auto;
width: 2rem;
height: 2rem;
border-radius: 50%;
background-color: #ffffff;
line-height: 2rem;
box-shadow: 0 0 0 5px #ebebeb;
}
.step-round > li > a:after {
position: absolute;
left: 0;
right: 0;
top: -38%;
background-color: #ebebeb;
z-index: 1;
height: 8px;
}
.step-round > li > a:after:after {
background-color: #00b8f5;
}
.step-round > li > a:hover {
background: transparent;
color: #00b8f5;
}
.step-round > li > a:hover:before {
background-color: #00b8f5;
color: #ffffff;
}
.step-round > li > a:hover:after {
background-color: #00b8f5;
}
.step-progress {
margin-top: 60px;
}
.step-progress > li > a {
color: #ebebeb;
padding-top: 1.8rem;
}
.step-progress > li > a:before {
position: absolute;
z-index: 2;
top: -35px;
left: 0;
right: 0;
margin: 0 auto;
width: 2rem;
height: 2rem;
border-radius: 50%;
line-height: 2rem;
box-shadow: 0 0 0 5px #ebebeb;
}
.step-progress > li > a:after {
content: "";
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
-webkit-background-size: 40px 40px;
background-size: 40px 40px;
background-color: #ebebeb;
float: left;
width: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 10px;
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
}
.step-progress > li > a span.caret {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
transform: rotate(180deg);
top: -4px;
}
.step-progress > li > a:hover {
background: transparent;
color: #00b8f5;
}
.step-progress > li > a:hover:before {
color: #ffffff;
background-color: #00b8f5;
}
.step-progress > li > a:hover:after {
background-color: #00b8f5;
}
.step-progress > li.active > a,
.step-progress > li.active > a:hover,
.step-progress > li.active > a:focus {
color: #00b8f5;
background: transparent;
}
.step-progress > li.active > a:before,
.step-progress > li.active > a:hover:before,
.step-progress > li.active > a:focus:before {
background-color: #00b8f5;
color: #ffffff;
}
.step-progress > li.active > a:after,
.step-progress > li.active > a:hover:after,
.step-progress > li.active > a:focus:after {
background-color: #00b8f5;
}
.step-progress > li.active > a:after {
-webkit-animation: progress-bar-stripes 2s linear infinite;
-o-animation: progress-bar-stripes 2s linear infinite;
animation: progress-bar-stripes 2s linear infinite;
}
.step-progress > li:first-child a:after {
border-radius: 5px 0 0 5px;
}
.step-progress > li:last-child a:after {
border-radius: 0 5px 5px 0;
}
/*step-progress*/
在哪遥远的地方 有个预览地址 查看全部
<ul class="nav nav-pills nav-justified step" :class="[className]">
<li v-for="(n,index) in list" :class="{'active': n <= step }">
<a @click="select(index)">step{{ n }}</a>
</li>
</ul>
</template>
<div id="app" class="container">
<step :list="5" :current="2" theme="progress"></step>
<step :list="5" :current="3" theme="round"></step>
<step :list="5" :current="1" theme="square"></step>
<step :list="5" :current="2" theme="arrow"></step>
</div>
<script>
const map = {
progress:'step-progress',
round:'step-round',
square:'step-square',
arrow:'step-arrow'
}
Vue.component('step',{
template:'#template_step',
props:['list','theme','current'],
data(){
return {
step:1
}
},
computed:{
className(){
return map[this.theme]
}
},
methods:{
select(idx){
this.step = idx + 1
}
},
mounted(){
this.step = typeof this.current != undefined ? this.current : 1
}
})
new Vue({
el:'#app'
})
</script>
.step {
counter-reset: flag;
}
.step li {
position: relative;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}
.step li a {
cursor: pointer;
padding: 10px 15px;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}
.step li a:before {
content: counter(flag);
counter-increment: flag;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}
.step li a:after {
content: "";
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}
.step-arrow {
margin: 20px 0;
}
.step-arrow.unhover li a:hover,
.step-arrow.unhover li a:focus {
background-color: #f6f6f6;
color: #444444;
}
.step-arrow.unhover li a:hover:before,
.step-arrow.unhover li a:focus:before {
background-color: #d2d2d2;
color: #ffffff;
}
.step-arrow.unhover li:not(:last-child) a:hover:after,
.step-arrow.unhover li:not(:last-child) a:focus:after {
background-color: #f6f6f6;
}
.step-arrow li {
padding-right: 20px;
}
.step-arrow li:last-child {
padding-right: 0;
}
.step-arrow li:nth-child(n+2) a {
margin-left: -20px;
border-radius: 0;
}
.step-arrow li:not(:last-child) a:after {
position: absolute;
top: -1px;
right: -20px;
width: 40px;
height: 40px;
transform: scale(0.707) rotate(45deg);
z-index: 1;
background-color: #f6f6f6;
border-radius: 0 5px 0 50px;
border-top: 1px solid #ffffff;
border-right: 1px solid #ffffff;
box-sizing: content-box;
}
.step-arrow li:not(:last-child) a:hover:after {
background-color: #00b8f5;
}
.step-arrow li a {
border-radius: 0;
color: #444444;
background-color: #f6f6f6;
}
.step-arrow li a:hover {
background-color: #00b8f5;
color: #ffffff;
}
.step-arrow li a:hover:before {
background: #ffffff;
color: #00b8f5;
}
.step-arrow li a:before {
position: absolute;
z-index: 2;
width: 20px;
height: 20px;
line-height: 20px;
border-radius: 20px;
left: 3rem;
font-weight: bold;
font-size: 1rem;
overflow: hidden;
top: 10px;
background: #d2d2d2;
color: #ffffff;
}
.step-arrow li.active a:before {
background: #ffffff;
color: #00b8f5;
}
.step-arrow li.active a:after {
background-color: #00b8f5;
}
.step-arrow li.active a,
.step-arrow li.active a:hover {
background-color: #00b8f5;
color: #ffffff;
}
.step-arrow li.active a:before,
.step-arrow li.active a:hover:before {
background-color: #ffffff;
color: #00b8f5;
}
.step-arrow li.active a:after,
.step-arrow li.active a:hover:after {
background-color: #00b8f5 !important;
}
.step-square {
margin-top: 40px;
}
.step-square > li:hover a:before,
.step-square > li:active a:before,
.step-square > li.active a:before {
background-color: #00b8f5;
color: #ffffff;
border-color: #00b8f5;
}
.step-square > li:hover a:after,
.step-square > li:active a:after,
.step-square > li.active a:after {
background-color: #00b8f5;
}
.step-square > li:first-child a:after {
left: 50%;
border-right: 1px solid #ffffff;
}
.step-square > li:last-child a:after {
right: 50%;
border-left: 1px solid #ffffff;
}
.step-square > li > a {
color: #ebebeb;
}
.step-square > li > a:hover {
background-color: #ffffff;
color: #00b8f5;
}
.step-square > li > a:before {
position: absolute;
z-index: 2;
top: -2rem;
left: 0;
right: 0;
margin: 0 auto;
width: 2rem;
height: 2rem;
background-color: #ffffff;
line-height: 20px;
border: 1px solid #ebebeb;
}
.step-square > li > a:after {
content: '';
position: absolute;
left: 0;
right: 0;
top: -35%;
background-color: #ebebeb;
z-index: 1;
height: 2px;
border: solid #ffffff;
border-width: 0 1px;
}
.step-square > li.active > a,
.step-square > li.active > a:focus,
.step-square > li.active > a:hover {
color: #00b8f5;
background: transparent;
}
.step-round {
margin-top: 40px;
}
.step-round > li:first-child > a:after {
left: 30%;
border-radius: 5px 0 0 5px;
}
.step-round > li:last-child > a:after {
right: 30%;
border-radius: 0 5px 5px 0;
}
.step-round > li.active > a,
.step-round > li.active > a:hover,
.step-round > li.active > a:focus {
background: transparent;
color: #00b8f5;
}
.step-round > li.active > a:before,
.step-round > li.active > a:hover:before,
.step-round > li.active > a:focus:before {
background-color: #00b8f5;
color: #ffffff;
}
.step-round > li.active > a:after,
.step-round > li.active > a:hover:after,
.step-round > li.active > a:focus:after {
background-color: #00b8f5;
}
.step-round > li > a {
color: #ebebeb;
}
.step-round > li > a:before {
position: absolute;
z-index: 2;
top: -2rem;
left: 0;
right: 0;
margin: 0 auto;
width: 2rem;
height: 2rem;
border-radius: 50%;
background-color: #ffffff;
line-height: 2rem;
box-shadow: 0 0 0 5px #ebebeb;
}
.step-round > li > a:after {
position: absolute;
left: 0;
right: 0;
top: -38%;
background-color: #ebebeb;
z-index: 1;
height: 8px;
}
.step-round > li > a:after:after {
background-color: #00b8f5;
}
.step-round > li > a:hover {
background: transparent;
color: #00b8f5;
}
.step-round > li > a:hover:before {
background-color: #00b8f5;
color: #ffffff;
}
.step-round > li > a:hover:after {
background-color: #00b8f5;
}
.step-progress {
margin-top: 60px;
}
.step-progress > li > a {
color: #ebebeb;
padding-top: 1.8rem;
}
.step-progress > li > a:before {
position: absolute;
z-index: 2;
top: -35px;
left: 0;
right: 0;
margin: 0 auto;
width: 2rem;
height: 2rem;
border-radius: 50%;
line-height: 2rem;
box-shadow: 0 0 0 5px #ebebeb;
}
.step-progress > li > a:after {
content: "";
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
-webkit-background-size: 40px 40px;
background-size: 40px 40px;
background-color: #ebebeb;
float: left;
width: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 10px;
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
}
.step-progress > li > a span.caret {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
transform: rotate(180deg);
top: -4px;
}
.step-progress > li > a:hover {
background: transparent;
color: #00b8f5;
}
.step-progress > li > a:hover:before {
color: #ffffff;
background-color: #00b8f5;
}
.step-progress > li > a:hover:after {
background-color: #00b8f5;
}
.step-progress > li.active > a,
.step-progress > li.active > a:hover,
.step-progress > li.active > a:focus {
color: #00b8f5;
background: transparent;
}
.step-progress > li.active > a:before,
.step-progress > li.active > a:hover:before,
.step-progress > li.active > a:focus:before {
background-color: #00b8f5;
color: #ffffff;
}
.step-progress > li.active > a:after,
.step-progress > li.active > a:hover:after,
.step-progress > li.active > a:focus:after {
background-color: #00b8f5;
}
.step-progress > li.active > a:after {
-webkit-animation: progress-bar-stripes 2s linear infinite;
-o-animation: progress-bar-stripes 2s linear infinite;
animation: progress-bar-stripes 2s linear infinite;
}
.step-progress > li:first-child a:after {
border-radius: 5px 0 0 5px;
}
.step-progress > li:last-child a:after {
border-radius: 0 5px 5px 0;
}
/*step-progress*/
在哪遥远的地方 有个预览地址 查看全部
<template id="template_step">
<ul class="nav nav-pills nav-justified step" :class="[className]">
<li v-for="(n,index) in list" :class="{'active': n <= step }">
<a @click="select(index)">step{{ n }}</a>
</li>
</ul>
</template>
<div id="app" class="container">
<step :list="5" :current="2" theme="progress"></step>
<step :list="5" :current="3" theme="round"></step>
<step :list="5" :current="1" theme="square"></step>
<step :list="5" :current="2" theme="arrow"></step>
</div>
<script>
const map = {
progress:'step-progress',
round:'step-round',
square:'step-square',
arrow:'step-arrow'
}
Vue.component('step',{
template:'#template_step',
props:['list','theme','current'],
data(){
return {
step:1
}
},
computed:{
className(){
return map[this.theme]
}
},
methods:{
select(idx){
this.step = idx + 1
}
},
mounted(){
this.step = typeof this.current != undefined ? this.current : 1
}
})
new Vue({
el:'#app'
})
</script>
在哪遥远的地方 有个预览地址
.step {
counter-reset: flag;
}
.step li {
position: relative;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}
.step li a {
cursor: pointer;
padding: 10px 15px;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}
.step li a:before {
content: counter(flag);
counter-increment: flag;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}
.step li a:after {
content: "";
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}
.step-arrow {
margin: 20px 0;
}
.step-arrow.unhover li a:hover,
.step-arrow.unhover li a:focus {
background-color: #f6f6f6;
color: #444444;
}
.step-arrow.unhover li a:hover:before,
.step-arrow.unhover li a:focus:before {
background-color: #d2d2d2;
color: #ffffff;
}
.step-arrow.unhover li:not(:last-child) a:hover:after,
.step-arrow.unhover li:not(:last-child) a:focus:after {
background-color: #f6f6f6;
}
.step-arrow li {
padding-right: 20px;
}
.step-arrow li:last-child {
padding-right: 0;
}
.step-arrow li:nth-child(n+2) a {
margin-left: -20px;
border-radius: 0;
}
.step-arrow li:not(:last-child) a:after {
position: absolute;
top: -1px;
right: -20px;
width: 40px;
height: 40px;
transform: scale(0.707) rotate(45deg);
z-index: 1;
background-color: #f6f6f6;
border-radius: 0 5px 0 50px;
border-top: 1px solid #ffffff;
border-right: 1px solid #ffffff;
box-sizing: content-box;
}
.step-arrow li:not(:last-child) a:hover:after {
background-color: #00b8f5;
}
.step-arrow li a {
border-radius: 0;
color: #444444;
background-color: #f6f6f6;
}
.step-arrow li a:hover {
background-color: #00b8f5;
color: #ffffff;
}
.step-arrow li a:hover:before {
background: #ffffff;
color: #00b8f5;
}
.step-arrow li a:before {
position: absolute;
z-index: 2;
width: 20px;
height: 20px;
line-height: 20px;
border-radius: 20px;
left: 3rem;
font-weight: bold;
font-size: 1rem;
overflow: hidden;
top: 10px;
background: #d2d2d2;
color: #ffffff;
}
.step-arrow li.active a:before {
background: #ffffff;
color: #00b8f5;
}
.step-arrow li.active a:after {
background-color: #00b8f5;
}
.step-arrow li.active a,
.step-arrow li.active a:hover {
background-color: #00b8f5;
color: #ffffff;
}
.step-arrow li.active a:before,
.step-arrow li.active a:hover:before {
background-color: #ffffff;
color: #00b8f5;
}
.step-arrow li.active a:after,
.step-arrow li.active a:hover:after {
background-color: #00b8f5 !important;
}
.step-square {
margin-top: 40px;
}
.step-square > li:hover a:before,
.step-square > li:active a:before,
.step-square > li.active a:before {
background-color: #00b8f5;
color: #ffffff;
border-color: #00b8f5;
}
.step-square > li:hover a:after,
.step-square > li:active a:after,
.step-square > li.active a:after {
background-color: #00b8f5;
}
.step-square > li:first-child a:after {
left: 50%;
border-right: 1px solid #ffffff;
}
.step-square > li:last-child a:after {
right: 50%;
border-left: 1px solid #ffffff;
}
.step-square > li > a {
color: #ebebeb;
}
.step-square > li > a:hover {
background-color: #ffffff;
color: #00b8f5;
}
.step-square > li > a:before {
position: absolute;
z-index: 2;
top: -2rem;
left: 0;
right: 0;
margin: 0 auto;
width: 2rem;
height: 2rem;
background-color: #ffffff;
line-height: 20px;
border: 1px solid #ebebeb;
}
.step-square > li > a:after {
content: '';
position: absolute;
left: 0;
right: 0;
top: -35%;
background-color: #ebebeb;
z-index: 1;
height: 2px;
border: solid #ffffff;
border-width: 0 1px;
}
.step-square > li.active > a,
.step-square > li.active > a:focus,
.step-square > li.active > a:hover {
color: #00b8f5;
background: transparent;
}
.step-round {
margin-top: 40px;
}
.step-round > li:first-child > a:after {
left: 30%;
border-radius: 5px 0 0 5px;
}
.step-round > li:last-child > a:after {
right: 30%;
border-radius: 0 5px 5px 0;
}
.step-round > li.active > a,
.step-round > li.active > a:hover,
.step-round > li.active > a:focus {
background: transparent;
color: #00b8f5;
}
.step-round > li.active > a:before,
.step-round > li.active > a:hover:before,
.step-round > li.active > a:focus:before {
background-color: #00b8f5;
color: #ffffff;
}
.step-round > li.active > a:after,
.step-round > li.active > a:hover:after,
.step-round > li.active > a:focus:after {
background-color: #00b8f5;
}
.step-round > li > a {
color: #ebebeb;
}
.step-round > li > a:before {
position: absolute;
z-index: 2;
top: -2rem;
left: 0;
right: 0;
margin: 0 auto;
width: 2rem;
height: 2rem;
border-radius: 50%;
background-color: #ffffff;
line-height: 2rem;
box-shadow: 0 0 0 5px #ebebeb;
}
.step-round > li > a:after {
position: absolute;
left: 0;
right: 0;
top: -38%;
background-color: #ebebeb;
z-index: 1;
height: 8px;
}
.step-round > li > a:after:after {
background-color: #00b8f5;
}
.step-round > li > a:hover {
background: transparent;
color: #00b8f5;
}
.step-round > li > a:hover:before {
background-color: #00b8f5;
color: #ffffff;
}
.step-round > li > a:hover:after {
background-color: #00b8f5;
}
.step-progress {
margin-top: 60px;
}
.step-progress > li > a {
color: #ebebeb;
padding-top: 1.8rem;
}
.step-progress > li > a:before {
position: absolute;
z-index: 2;
top: -35px;
left: 0;
right: 0;
margin: 0 auto;
width: 2rem;
height: 2rem;
border-radius: 50%;
line-height: 2rem;
box-shadow: 0 0 0 5px #ebebeb;
}
.step-progress > li > a:after {
content: "";
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
-webkit-background-size: 40px 40px;
background-size: 40px 40px;
background-color: #ebebeb;
float: left;
width: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 10px;
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
}
.step-progress > li > a span.caret {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
transform: rotate(180deg);
top: -4px;
}
.step-progress > li > a:hover {
background: transparent;
color: #00b8f5;
}
.step-progress > li > a:hover:before {
color: #ffffff;
background-color: #00b8f5;
}
.step-progress > li > a:hover:after {
background-color: #00b8f5;
}
.step-progress > li.active > a,
.step-progress > li.active > a:hover,
.step-progress > li.active > a:focus {
color: #00b8f5;
background: transparent;
}
.step-progress > li.active > a:before,
.step-progress > li.active > a:hover:before,
.step-progress > li.active > a:focus:before {
background-color: #00b8f5;
color: #ffffff;
}
.step-progress > li.active > a:after,
.step-progress > li.active > a:hover:after,
.step-progress > li.active > a:focus:after {
background-color: #00b8f5;
}
.step-progress > li.active > a:after {
-webkit-animation: progress-bar-stripes 2s linear infinite;
-o-animation: progress-bar-stripes 2s linear infinite;
animation: progress-bar-stripes 2s linear infinite;
}
.step-progress > li:first-child a:after {
border-radius: 5px 0 0 5px;
}
.step-progress > li:last-child a:after {
border-radius: 0 5px 5px 0;
}
/*step-progress*/
javascaript 操作 table dom
javascript/jQuery • catchcat 发表了文章 • 0 个评论 • 1706 次浏览 • 2016-12-18 22:47
### js 操作table 对象：
?
cells 返回包含表格中所有单元格的一个数组。
rows 返回包含表格中所有行的一个数组。
tBodies 返回包含表格中所有 tbody 的一个数组。
--------------------------------------------------------------------------------------
caption 返回表格标题。 Yes
cellPadding 设置或返回单元格内容和单元格边框之间的空白量。 Yes
cellSpacing 设置或返回在表格中的单元格之间的空白量。 Yes
frame 设置或返回表格的外部边框。 Yes
height 已废弃?设置或者返回表格高度 instead D
rules 设置或返回表格的内部边框（行线）。 Yes
summary 设置或返回对表格的描述（概述）。 Yes
tFoot 返回表格的 TFoot 对象。如果不存在该元素，则为 null。 Yes
tHead 返回表格的 THead 对象。如果不存在该元素，则为 null。
------------------------------------------------------------------------------------------
createCaption() 为表格创建一个 caption 元素。 Yes
createTFoot() 在表格中创建一个空的 tFoot 元素。 Yes
createTHead() 在表格中创建一个空的 tHead 元素。 Yes
deleteCaption() 从表格删除 caption 元素以及其内容。 Yes
deleteRow() 从表格删除一行。 Yes
deleteTFoot() 从表格删除 tFoot 元素及其内容。 Yes
deleteTHead() 从表格删除 tHead 元素及其内容。 Yes
insertRow() 在表格中插入一个新行。
?<table border='1' width="350">
<thead>
<tr>
<th>#</th>
<th>name</th>
<th>age</th>
<th>operation</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
var oName = document.getElementById('name');
var oAge = document.getElementById('age');
var obtn = document.getElementById('btn');
var oTable = document.getElementsByTagName('table')[0];
var oid = oTable.tBodies[0].rows.length+1;
var oTfoot = oTable.tFoot;
obtn.onclick = function(){
var oTr = document.createElement('tr');
oTr.innerHTML = '<td>'+(oid++)+'</td><td>'+oName.value+'</td><td>'+oAge.value+'</td><td><a href="javascript:;">del</a></td>'
oTable.tBodies[0].appendChild(oTr);
var odel = oTr.getElementsByTagName('a')[0];
odel.onclick = function(){
oTable.tBodies[0].removeChild(this.parentNode.parentNode);
};
};
</script> 查看全部
?
cells 返回包含表格中所有单元格的一个数组。
rows 返回包含表格中所有行的一个数组。
tBodies 返回包含表格中所有 tbody 的一个数组。
--------------------------------------------------------------------------------------
caption 返回表格标题。 Yes
cellPadding 设置或返回单元格内容和单元格边框之间的空白量。 Yes
cellSpacing 设置或返回在表格中的单元格之间的空白量。 Yes
frame 设置或返回表格的外部边框。 Yes
height 已废弃?设置或者返回表格高度 instead D
rules 设置或返回表格的内部边框（行线）。 Yes
summary 设置或返回对表格的描述（概述）。 Yes
tFoot 返回表格的 TFoot 对象。如果不存在该元素，则为 null。 Yes
tHead 返回表格的 THead 对象。如果不存在该元素，则为 null。
------------------------------------------------------------------------------------------
createCaption() 为表格创建一个 caption 元素。 Yes
createTFoot() 在表格中创建一个空的 tFoot 元素。 Yes
createTHead() 在表格中创建一个空的 tHead 元素。 Yes
deleteCaption() 从表格删除 caption 元素以及其内容。 Yes
deleteRow() 从表格删除一行。 Yes
deleteTFoot() 从表格删除 tFoot 元素及其内容。 Yes
deleteTHead() 从表格删除 tHead 元素及其内容。 Yes
insertRow() 在表格中插入一个新行。
?<table border='1' width="350">
<thead>
<tr>
<th>#</th>
<th>name</th>
<th>age</th>
<th>operation</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
var oName = document.getElementById('name');
var oAge = document.getElementById('age');
var obtn = document.getElementById('btn');
var oTable = document.getElementsByTagName('table')[0];
var oid = oTable.tBodies[0].rows.length+1;
var oTfoot = oTable.tFoot;
obtn.onclick = function(){
var oTr = document.createElement('tr');
oTr.innerHTML = '<td>'+(oid++)+'</td><td>'+oName.value+'</td><td>'+oAge.value+'</td><td><a href="javascript:;">del</a></td>'
oTable.tBodies[0].appendChild(oTr);
var odel = oTr.getElementsByTagName('a')[0];
odel.onclick = function(){
oTable.tBodies[0].removeChild(this.parentNode.parentNode);
};
};
</script> 查看全部
### js 操作table 对象：
?
cells 返回包含表格中所有单元格的一个数组。
rows 返回包含表格中所有行的一个数组。
tBodies 返回包含表格中所有 tbody 的一个数组。
--------------------------------------------------------------------------------------
caption 返回表格标题。 Yes
cellPadding 设置或返回单元格内容和单元格边框之间的空白量。 Yes
cellSpacing 设置或返回在表格中的单元格之间的空白量。 Yes
frame 设置或返回表格的外部边框。 Yes
height 已废弃?设置或者返回表格高度 instead D
rules 设置或返回表格的内部边框（行线）。 Yes
summary 设置或返回对表格的描述（概述）。 Yes
tFoot 返回表格的 TFoot 对象。如果不存在该元素，则为 null。 Yes
tHead 返回表格的 THead 对象。如果不存在该元素，则为 null。
------------------------------------------------------------------------------------------
createCaption() 为表格创建一个 caption 元素。 Yes
createTFoot() 在表格中创建一个空的 tFoot 元素。 Yes
createTHead() 在表格中创建一个空的 tHead 元素。 Yes
deleteCaption() 从表格删除 caption 元素以及其内容。 Yes
deleteRow() 从表格删除一行。 Yes
deleteTFoot() 从表格删除 tFoot 元素及其内容。 Yes
deleteTHead() 从表格删除 tHead 元素及其内容。 Yes
insertRow() 在表格中插入一个新行。
?
?
cells 返回包含表格中所有单元格的一个数组。
rows 返回包含表格中所有行的一个数组。
tBodies 返回包含表格中所有 tbody 的一个数组。
--------------------------------------------------------------------------------------
caption 返回表格标题。 Yes
cellPadding 设置或返回单元格内容和单元格边框之间的空白量。 Yes
cellSpacing 设置或返回在表格中的单元格之间的空白量。 Yes
frame 设置或返回表格的外部边框。 Yes
height 已废弃?设置或者返回表格高度 instead D
rules 设置或返回表格的内部边框（行线）。 Yes
summary 设置或返回对表格的描述（概述）。 Yes
tFoot 返回表格的 TFoot 对象。如果不存在该元素，则为 null。 Yes
tHead 返回表格的 THead 对象。如果不存在该元素，则为 null。
------------------------------------------------------------------------------------------
createCaption() 为表格创建一个 caption 元素。 Yes
createTFoot() 在表格中创建一个空的 tFoot 元素。 Yes
createTHead() 在表格中创建一个空的 tHead 元素。 Yes
deleteCaption() 从表格删除 caption 元素以及其内容。 Yes
deleteRow() 从表格删除一行。 Yes
deleteTFoot() 从表格删除 tFoot 元素及其内容。 Yes
deleteTHead() 从表格删除 tHead 元素及其内容。 Yes
insertRow() 在表格中插入一个新行。
?
<table border='1' width="350">
<thead>
<tr>
<th>#</th>
<th>name</th>
<th>age</th>
<th>operation</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
var oName = document.getElementById('name');
var oAge = document.getElementById('age');
var obtn = document.getElementById('btn');
var oTable = document.getElementsByTagName('table')[0];
var oid = oTable.tBodies[0].rows.length+1;
var oTfoot = oTable.tFoot;
obtn.onclick = function(){
var oTr = document.createElement('tr');
oTr.innerHTML = '<td>'+(oid++)+'</td><td>'+oName.value+'</td><td>'+oAge.value+'</td><td><a href="javascript:;">del</a></td>'
oTable.tBodies[0].appendChild(oTr);
var odel = oTr.getElementsByTagName('a')[0];
odel.onclick = function(){
oTable.tBodies[0].removeChild(this.parentNode.parentNode);
};
};
</script>
Js动态创建/添加/删除li
javascript/jQuery • catchcat 发表了文章 • 0 个评论 • 1734 次浏览 • 2016-12-16 23:13
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<input id="tex" type="text">
<input id="btn" type="button" value="提交">
<ul id="oul"></ul>
<script>
var otex = document.getElementById('tex');
var obtn = document.getElementById('btn');
var oul = document.getElementById('oul');
obtn.onclick = function(){
//创建删除标签
var createTagA = document.createElement('a');
createTagA.setAttribute('href','javascript:;')
createTagA.innerHTML = "删除";
//创建li标签
var createTagLi = document.createElement('li');
var ali = oul.getElementsByTagName('li');
createTagLi.innerHTML = otex.value;
//li添加删除标签
createTagLi.appendChild(createTagA);
//判断输入框内容
if(!/^[\w\u4E00-\u9FA5]+$/.test(otex.value)){
alert('请不要输入数字/字母（不区分大小写）/汉字之外的符号');
otex.value = "";
}else{
//如果条件满足//兼容ie和ff
if(ali.length>0){
oul.insertBefore(createTagLi,ali[0]);
otex.value = "";
}else{
oul.appendChild(createTagLi);
otex.value = "";
};
};
//删除事件
createTagA.onclick = function(){
oul.removeChild(this.parentNode)
};
};
</script>
</body>
</html> 查看全部
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<input id="tex" type="text">
<input id="btn" type="button" value="提交">
<ul id="oul"></ul>
<script>
var otex = document.getElementById('tex');
var obtn = document.getElementById('btn');
var oul = document.getElementById('oul');
obtn.onclick = function(){
//创建删除标签
var createTagA = document.createElement('a');
createTagA.setAttribute('href','javascript:;')
createTagA.innerHTML = "删除";
//创建li标签
var createTagLi = document.createElement('li');
var ali = oul.getElementsByTagName('li');
createTagLi.innerHTML = otex.value;
//li添加删除标签
createTagLi.appendChild(createTagA);
//判断输入框内容
if(!/^[\w\u4E00-\u9FA5]+$/.test(otex.value)){
alert('请不要输入数字/字母（不区分大小写）/汉字之外的符号');
otex.value = "";
}else{
//如果条件满足//兼容ie和ff
if(ali.length>0){
oul.insertBefore(createTagLi,ali[0]);
otex.value = "";
}else{
oul.appendChild(createTagLi);
otex.value = "";
};
};
//删除事件
createTagA.onclick = function(){
oul.removeChild(this.parentNode)
};
};
</script>
</body>
</html> 查看全部
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<input id="tex" type="text">
<input id="btn" type="button" value="提交">
<ul id="oul"></ul>
<script>
var otex = document.getElementById('tex');
var obtn = document.getElementById('btn');
var oul = document.getElementById('oul');
obtn.onclick = function(){
//创建删除标签
var createTagA = document.createElement('a');
createTagA.setAttribute('href','javascript:;')
createTagA.innerHTML = "删除";
//创建li标签
var createTagLi = document.createElement('li');
var ali = oul.getElementsByTagName('li');
createTagLi.innerHTML = otex.value;
//li添加删除标签
createTagLi.appendChild(createTagA);
//判断输入框内容
if(!/^[\w\u4E00-\u9FA5]+$/.test(otex.value)){
alert('请不要输入数字/字母（不区分大小写）/汉字之外的符号');
otex.value = "";
}else{
//如果条件满足//兼容ie和ff
if(ali.length>0){
oul.insertBefore(createTagLi,ali[0]);
otex.value = "";
}else{
oul.appendChild(createTagLi);
otex.value = "";
};
};
//删除事件
createTagA.onclick = function(){
oul.removeChild(this.parentNode)
};
};
</script>
</body>
</html>