array_html/css_WEB-ITnose での jQuery 操作

5*5 の表があります。マウスでセルを 1 回クリックし、セルの行と列を記録します。そして、マウスがクリックされた回数に応じて、対応するセルの色が変化し、行数、列数、クリック数が配列に格納されます。各セルに対する最後の操作が配列に記録されるように配列を編成する方法。 [x,y,c_count].

宝くじを手動で選択する基本機能と同様に

それぞれを設計しました。セルにIDを自動定義します。例えば、1-1はtdid=1-1、3-1はtdid=3-1を意味します
2、クリックするたびにtdにCSS(背景色)を追加します
3を記述します。クリックするたびに.eachのPush()の操作を行います。
4. クリックによる追加の長さを制御したい場合は、クリック時のキャンセル機能を設計します。もう一度、クリック時にカスタム属性 aly= を追加し、それを配列に追加します。

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

マウスを 3 回クリックすると残りが 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>

function find(a, x, y) {
for(var i=0; i if( a[i][0] == x && a[i][ 1] == y) return i; return

}
この関数は、配列内の指定されたレコードを検索し、対応する添え字を返すために使用されます。 (見つからない場合は -1 を返します)

var x = this.cellIndex ; //セルの列番号を取得します (これは jq ではなく dhtml です)
var y = this.parentNode.rowIndex; // 行番号を取得します。セルが存在する行 (これは jq ではなく dhtml)
var i = find(ar, x, y) //セルがクリックされたかどうかを確認します
if(i else ar[i][2]++; // そうでない場合はカウントが 1 つ増加します
$('#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; //セルの列番号を取得します (これは jq ではなく dhtml です)
var y = this.parentNode.rowIndex; // セルが配置されている行の行番号を取得します (これは dhtml です) 、jq ではありません)
var i = find(ar, x, y) //セルがクリックされたかどうかを確認します
if(i else ar[i][2]++; // それ以外の場合は、カウントに 1 を追加します
$('#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;セルの列番号を取得します (これは jq ではなく dhtml です)
var y = this.parentNode.rowIndex; //セルが存在する行の行番号を取得します (これは jq ではなく dhtml です)
var i = find(ar, x, y); //セルがクリックされたかどうかを確認します
if(i ar[ i][2]++; // それ以外の場合は、カウントに 1 を追加します
$('#view').html(JSON.stringify(ar)); // 問題の発見を容易にするために、次のようにします。現在のセルが何回クリックされたかはすでにわかっています (ar[i][2])
それでは、他に何をすべきか、自分の頭を使う時です

$(function () {
ar = [];
$('td').click(function () {
var x = this.cellIndex + 1;
var y = this.parent Node.rowIndex + 1; var i = find(ar, x, y);
//console.log(i); (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).cs s("background","#555555"); //深灰色、通道# DAA520"); //橙色、舍中空白
休憩;
}
}
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 < a.length; i++)
if (a[i][0] == x && a[i][1] = = y) iを返します。
-1 を返す;
}
});
-------------------------------------------------
初めてコンソールをクリックしたときにコンソールでエラーが報告されるのはなぜですか? ? ?それなら大丈夫ですよ