有一个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>
<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>
<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>
function find(a, x, y) {
for(var i=0; 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
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
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])
那么还要做什么,就该自己动动脑筋了