JavascriptをclickableGrid

Question

こんにちは私はCSSコードこのコードに

http://jsfiddle.net/6qkdP/2/

を使用しています：

javascriptのコード

.grid { margin:1em auto; border-collapse:collapse } 
.grid td { 
cursor:pointer; 
width:30px; height:30px; 
border:1px solid #ccc; 
text-align:center; 
font-family:sans-serif; font-size:13px 
} 
.grid td.clicked { 
background-color:yellow; 
font-weight:bold; color:red; 
} 

：I私はJavaScriptに新しいです

var lastClicked; 
var grid = clickableGrid(10,10,function(el,row,col,i){ 
console.log("You clicked on element:",el); 
console.log("You clicked on row:",row); 
console.log("You clicked on col:",col); 
console.log("You clicked on item #:",i); 

el.className='clicked'; 
if (lastClicked) lastClicked.className=''; 
lastClicked = el; 
}); 

document.body.appendChild(grid); 

function clickableGrid(rows, cols, callback){ 
var i=0; 
var grid = document.createElement('table'); 
grid.className = 'grid'; 
for (var r=0;r<rows;++r){ 
    var tr = grid.appendChild(document.createElement('tr')); 
    for (var c=0;c<cols;++c){ 
     var cell = tr.appendChild(document.createElement('td')); 
     cell.innerHTML = ++i; 
     cell.addEventListener('click',(function(el,r,c,i){ 
      return function(){ 
       callback(el,r,c,i); 
      } 
     })(cell,r,c,i),false); 
    } 
} 
return grid; 
} 

、私が必要コードを実行すると、別のセルを描画します。たとえば、コードを実行すると、必要ならばどうしますか？ eセルが25で描画されますか？

Answer 1

私は新しいフィドルを作りました。 <div>を作成し、要素をクリックすると、段落タグのdivにクリックされた番号が追加されます。グリッドコールバックの変更を確認します。

<div id="numSelected"> 
<p> 
Numbers selected are below: 
</p> 
</div> 

ここではJavaScriptです：

var lastClicked; 
var grid = clickableGrid(11,11,function(el,row,col,i){ 
    console.log("You clicked on element:",el); 
    console.log("You clicked on row:",row); 
    console.log("You clicked on col:",col); 
    console.log("You clicked on item #:",i); 

    el.className='clicked'; 
    if (lastClicked) lastClicked.className=''; 
    lastClicked = el; 

    var div = document.createElement('p'); 
    div.innerHTML = i; 

    document.getElementById('numSelected').appendChild(div); 
}); 

document.body.appendChild(grid); 

function clickableGrid(rows, cols, callback){ 
    var i=0; 
    var grid = document.createElement('table'); 
    grid.className = 'grid'; 
    for (var r=0;r<rows;++r){ 
     var tr = grid.appendChild(document.createElement('tr')); 
     for (var c=0;c<cols;++c){ 
      var cell = tr.appendChild(document.createElement('td')); 
      cell.innerHTML = ++i; 
      cell.addEventListener('click',(function(el,r,c,i){ 
       return function(){ 
        callback(el,r,c,i); 
       } 
      })(cell,r,c,i),false); 
     } 
    } 
    return grid; 
} 

​​