onclick td要素、これだけが変更されます

Question

私はonclickイベントに問題があります。 私は3 * 3のテーブルを持っています.td要素をクリックすると、このテーブルだけを変更します。 コードは、以下に示すよう

var CaseID = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9); 
 
var table = document.createElement("table"); 
 
for (a = 0; a < 3; a++) { 
 
    var tr = document.createElement("tr"); 
 
    for (b = 0; b < 3; b++) { 
 
     var td = document.createElement("td"); 
 
     
 
     td.onclick = function() { 
 
    // here I want to change backgroundColor into red, but only for the one I pressed 
 
     }; 
 
     
 
     tr.appendChild(td); 
 
    } 
 
    table.appendChild(tr); 
 
} 
 
document.body.appendChild(table); 
 

 
for (c = 0; c < CaseID.length; c++) { 
 
    document.getElementsByTagName("td")[c].id = CaseID[c]; 
 
}

table { 
 
    border-collapse:collapse; 
 
} 
 

 
tr, td { 
 
    height:50px; 
 
    width:50px; 
 
    border:1px #000 solid; 
 
}

Answer 1

は、あなただけの、そのスタイルプロパティののbackgroundColorを設定することができます。そのonclick関数内で、thisは要素を参照します。

var CaseID = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9); 
 
var table = document.createElement("table"); 
 
for (a = 0; a < 3; a++) { 
 
    var tr = document.createElement("tr"); 
 
    for (b = 0; b < 3; b++) { 
 
     var td = document.createElement("td"); 
 
     
 
     td.onclick = function() { 
 
      this.style.backgroundColor = 'red'; 
 
     }; 
 
     
 
     tr.appendChild(td); 
 
    } 
 
    table.appendChild(tr); 
 
} 
 
document.body.appendChild(table); 
 

 
for (c = 0; c < CaseID.length; c++) { 
 
    document.getElementsByTagName("td")[c].id = CaseID[c]; 
 
}

table { 
 
    border-collapse:collapse; 
 
} 
 

 
tr, td { 
 
    height:50px; 
 
    width:50px; 
 
    border:1px #000 solid; 
 
}