Home > Web Front-end > HTML Tutorial > jQuery对数组的操作_html/css_WEB-ITnose

jQuery对数组的操作_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:21:46
Original
978 people have browsed it

有一个5*5的表格,鼠标点击单元格一次,记录下该单元格是的第几行,第几列。以及鼠标点击了几次,鼠标点击的次数不同,相应单元格北京颜色的会改变,然后将行数,列数,点击次数存放到数组中,。如何整理数组,使得数组中记录的是对每一个单元格的最后一次操作。[x,y,c_count].


回复讨论(解决方案)

类似手动选择彩票的基本功能.

我设计这功能
1,每个单元格自定义ID,例如1-1 就是tdid=1-1,3-1就是tdid=3-1.
2,每次点击给td add css.(背景色)
3,把这些操作写在.each里面每次点击.push()到数组.
4,如果要控制点击添加的长度在点击时控制length.
5,如果要设计已经添加的再次点击取消功能,要在点击时添加自定义属性aly=yes,aly=no再添加到数组.

<script src=scripts/jquery-1.8.3.min.js></script><script>$(function() {  ar = [];  $('td').click(function() {    var x = this.cellIndex;    var y = this.parentNode.rowIndex;    var i = find(ar, x, y);    if(i < 0) ar.push([x, y, 1]);    else ar[i][2]++;    $('#view').html(JSON.stringify(ar));  });  function find(a, x, y) {    for(var i=0; i<a.length; i++)      if(a[i][0] == x && a[i][1] == y) return i;    return -1;  }});</script><table border width=300><tr><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td></tr></table><div id=view></div>
Copy after login
Copy after login
Copy after login

<script src=scripts/jquery-1.8.3.min.js></script><script>$(function() {  ar = [];  $('td').click(function() {    var x = this.cellIndex;    var y = this.parentNode.rowIndex;    var i = find(ar, x, y);    if(i < 0) ar.push([x, y, 1]);    else ar[i][2]++;    $('#view').html(JSON.stringify(ar));  });  function find(a, x, y) {    for(var i=0; i<a.length; i++)      if(a[i][0] == x && a[i][1] == y) return i;    return -1;  }});</script><table border width=300><tr><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td></tr></table><div id=view></div>
Copy after login
Copy after login
Copy after login

能否注解一下,另外鼠标点击三次是一个循环,取余1,2,0分别代表不同的颜色

<script src=scripts/jquery-1.8.3.min.js></script><script>$(function() {  ar = [];  $('td').click(function() {    var x = this.cellIndex;    var y = this.parentNode.rowIndex;    var i = find(ar, x, y);    if(i < 0) ar.push([x, y, 1]);    else ar[i][2]++;    $('#view').html(JSON.stringify(ar));  });  function find(a, x, y) {    for(var i=0; i<a.length; i++)      if(a[i][0] == x && a[i][1] == y) return i;    return -1;  }});</script><table border width=300><tr><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td></tr></table><div id=view></div>
Copy after login
Copy after login
Copy after login






  function find(a, x, y) {
    for(var i=0; i      if(a[i][0] == x && a[i][1] == y) return i;
    return -1;
  }
这个函数用于在数组中查找指定的记录,并返回对应的下标(没找到返回 -1)

    var x = this.cellIndex; //取得单元格的列号(这是 dhtml 的,不是 jq 的)
    var y = this.parentNode.rowIndex; //取得单元格所在行的行号(这是 dhtml 的,不是 jq 的)
    var i = find(ar, x, y); //查找该单元格是否被点击过
    if(i     else ar[i][2]++; //否则计数加一
    $('#view').html(JSON.stringify(ar)); //仅仅是为了观察一下,方便发现问题

你已经知道当前单元格被点击过几次了(ar[i][2])
那么还要做什么,就该自己动动脑筋了

  function find(a, x, y) {
    for(var i=0; i      if(a[i][0] == x && a[i][1] == y) return i;
    return -1;
  }
这个函数用于在数组中查找指定的记录,并返回对应的下标(没找到返回 -1)

    var x = this.cellIndex; //取得单元格的列号(这是 dhtml 的,不是 jq 的)
    var y = this.parentNode.rowIndex; //取得单元格所在行的行号(这是 dhtml 的,不是 jq 的)
    var i = find(ar, x, y); //查找该单元格是否被点击过
    if(i     else ar[i][2]++; //否则计数加一
    $('#view').html(JSON.stringify(ar)); //仅仅是为了观察一下,方便发现问题

你已经知道当前单元格被点击过几次了(ar[i][2])
那么还要做什么,就该自己动动脑筋了

嗯啊   十分感谢!!我上面写的跟你写的一样,只不过用的是mousedown,记录所有的额点击数,我需要每一个单元格的最后一次的点击,所以困住了,我想的比较复杂,不太好实现。不过还是十分感谢

  function find(a, x, y) {
    for(var i=0; i      if(a[i][0] == x && a[i][1] == y) return i;
    return -1;
  }
这个函数用于在数组中查找指定的记录,并返回对应的下标(没找到返回 -1)

    var x = this.cellIndex; //取得单元格的列号(这是 dhtml 的,不是 jq 的)
    var y = this.parentNode.rowIndex; //取得单元格所在行的行号(这是 dhtml 的,不是 jq 的)
    var i = find(ar, x, y); //查找该单元格是否被点击过
    if(i     else ar[i][2]++; //否则计数加一
    $('#view').html(JSON.stringify(ar)); //仅仅是为了观察一下,方便发现问题

你已经知道当前单元格被点击过几次了(ar[i][2])
那么还要做什么,就该自己动动脑筋了


 $(function () {
        ar = [];
        $('td').click(function () {
            var x = this.cellIndex + 1;
            var y = this.parentNode.rowIndex + 1;
            var i = find(ar, x, y);
            //console.log(i);
            if (i                 ar.push([x, y, 1]);
            } else {
                ar[i][2]++;
                console.log(ar[i][2]);
                var count = ar[i][2] % 3;
                ar[i][2] = count;
                switch (ar[i][2]) {
                    case 1: //点击1,4,7...3n+1下
                        $(this).css("background", "#228B22"); //绿色,栏位
                        break;
                    case 2: //点击2,5,8...3n+2下
                        $(this).css("background", "#555555"); //深灰色,通道
                        break;
                    case 0: //点击3,6,9...3n+0下
                        $(this).css("background", "#DAA520"); //橙色,舍中空白
                        break;
                }
            }
            console.log(ar[i][2]);
            console.log(ar);
            console.log(x);
            console.log(y);
            console.log(i);
            $('#view').html(JSON.stringify(ar));
        });
        function find(a, x, y) {
            for (var i = 0; i                 if (a[i][0] == x && a[i][1] == y) return i;
            return -1;
        }
    });
----------------------------------
为什么点第一下的时候,控制台报错???然后就没事了
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template