jQuery对数组的操作_html/css_WEB-ITnose-html tutorial-php.cn

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

WBOY

Lepaskan： 2016-06-24 11:21:46

asal

978 orang telah melayarinya

有一个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>

Salin selepas log masuk

<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>

Salin selepas log masuk

能否注解一下，另外鼠标点击三次是一个循环，取余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>

Salin selepas log masuk

  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 () {
        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;
        }
    });
----------------------------------
为什么点第一下的时候，控制台报错？？？然后就没事了