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

WBOY
Freigeben: 2016-06-24 11:21:46
Original
940 Leute haben es durchsucht

有一个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>
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren

<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>
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren

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






  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;
        }
    });
----------------------------------
为什么点第一下的时候,控制台报错???然后就没事了
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage