在之前的基础上,添加方向键左右支持。

不过在学脚本prototype.js的过程中发现有些方法我们很少用到,但是有些方法好像很经典,脚本库在不断的加大,眼前一片…继续我们JS入门,今天学习一下Array数组。

效果图

在实际工作中,我们会碰到这样一个情况。在页面中显示着100个数据,同时用户还希望他可以更改其中的数据,普通的方式可能如下,

首先我们来看看它的定义:

图片 1 

 

复制代码 代码如下:

 

图片 2

var arrayObj = new Array()
var arrayObj = new Array([size])
var arrayObj = new Array([element0[, element1[, [,
elementN]]]])

在线演示
打包下载

这种方式会出现一个问题,就是页面显示的时候有点慢,同时如果有滚动条的话,会有些卡。下面给出我的一个解决方法,显示的时候全是td的,没有input标签,如下

其中:arrayObj是赋值为 Array 对象的变量名。 
       
size由于数组的下标是从零开始,创建的元素的下标将从零到 size -1。 
        element0,…,elementN这将创建具有 n + 1 个元素的长度为 n + 1
的数组。使用该语法时必须有一个以上元素。

复制代码 代码如下:

图片 3

 
如果只向 Array 的构造函数传递了一个参数,而该参数是数字,则它必须是无符号
32 位整数(大约 40 亿)。该值成为数组的大小。如果该值为数值,但小于 0
或不为整数,发生运行时错误。

<script type=”text/javascript”>
$(function() {
$(“#tabs”).tabs();
});
</script>

 当你点击其中一个td时,就会出现下面这样

 
如果传递给 Array 构造函数的是单个值并且不是数值,设置 length 属性为
1,而且唯一的元素值成为单个的传入的参数。

<script type=”text/javascript”>
gvChartInit();
jQuery(document).ready(function() {
jQuery(‘#myTable1’).gvChart({
chartType: ‘AreaChart’,
gvSettings: {
vAxis: { title: ‘金额’ },
hAxis: { title: ‘月份’ },
width: 720,
height: 300
}
});

图片 4

 
由于JS数组为解析数组,也就是尽管可以分配多个元素给一个数组,但实际上只有包含数据的元素才存在。这减少了数组使用的内存数量。

jQuery(‘#myTable2’).gvChart({
chartType: ‘LineChart’,
gvSettings: {
vAxis: { title: ‘金额’ },
hAxis: { title: ‘月份’ },
width: 720,
height: 300
}
});
jQuery(‘#myTable3’).gvChart({
chartType: ‘BarChart’,
gvSettings: {
vAxis: { title: ‘金额’ },
hAxis: { title: ‘月份’ },
width: 720,
height: 300
}
});

当你点击td的时候,会在td动态加入一个input同时把td的值赋给input,当你鼠标离开input时,会把input的值赋给td。同时支持回车,上下方向键,进行向右,上下移动。

 
Array对象具有三个内置属性:constructor,length,prototype我会在特地写一篇关于constructor,
prototype,arguments等对象属性的文章,在这里就不在多说了。下面我们主要看看Array内置的一些方法,这个对我们很重要,因为会经常用得这个东东。

jQuery(‘#myTable4’).gvChart({
chartType: ‘ColumnChart’,
gvSettings: {
vAxis: { title: ‘金额’ },
hAxis: { title: ‘月份’ },
width: 720,
height: 300
}
});
jQuery(‘#myTable5’).gvChart({
chartType: ‘PieChart’,
gvSettings: {
vAxis: { title: ‘金额’ },
hAxis: { title: ‘月份’ },
width: 720,
height: 300
}
});
});
</script>

可以对这个做一些扩展,做出一些很实际的功能,(对大批量数据编辑等等)。不多说了,附上源码,仅供参考。
在线演示地址
打包下载地址

  concat方法:连接两个或多个数组并返回一个新的数组。值得我们注意的是(引用类型)对于从正被连接到新数组的数组中复制的对象参数,复制后仍然指向相同的对象,不论新数组和源数组中哪一个有改变,都将引起另一个的改变;
(值类型)对于连接到新数组的数值或字符串,只复制其值,一个数组中值有改变并不影响另一个数组中的值。例子:

CSS样式

在实际工作中,我们会碰到这样一个情况。在页面中显示着100个数据,同时用户还希望他可以更改…

复制代码 代码如下:

复制代码 代码如下:

function ConcatArrayDemo(){
var a, b, c, d;
a = new Array(1,2,3);
b = “JScript”;
c = new Array(42, “VBScript);
d = a.concat(b, c);
// 返回数组 [1, 2, 3, “JScript”, 42, “VBScript”]
return(d);
}

<style type =”text/css” >
body
{
text-align: center;
font-family: Arial, sans-serif;
font-size: 12px;
}
a
{
text-decoration: none;
font-weight: bold;
color: #555;
}
a:hover
{
color: #000;
}
div.easyui-tabs
{
margin: auto;
text-align: left;
width: 720px;
}
div.clean
{
border: 1px solid #850000;
}
.clean td, .clean th
{
border: 2px solid #bbb;
background: #ddd;
padding: 5px 10px;
text-align: center;
border-radius: 2px;
}
.clean table
{
margin: auto;
margin-top: 15px;
margin-bottom: 15px;
}
.clean caption
{
font-weight: bold;
}
.gvChart, .clean
{
border: 2px solid #850000;
border-radius: 5px;
-moz-border-radius: 10px;
width: 720px;
margin: auto;
margin-top: 20px;
}
pre
{
background: #eee;
padding: 10px;
border-radius: 10px;
-moz-border-radius: 10px;
}
</style>

join方法:将数组中的项,按特定的分隔符转化为字符串并返回,默认分隔符为逗号,例子:

Html

发表评论

电子邮件地址不会被公开。 必填项已用*标注