6

私はしばらくの間、この問題に悩まされてきました。

ご注意ください。jqueryなし=/

私が持っているJSコードは次のとおりです

function highlight(){
 var table = document.getElementById('dataTable');
 for (var i=0;i < table.rows.length;i++){
  table.rows[i].onclick= function () {
   if(!this.hilite){
    this.origColor=this.style.backgroundColor;
    this.style.backgroundColor='#BCD4EC';
    this.hilite = true;
   }
   else{
    this.style.backgroundColor=this.origColor;
    this.hilite = false;
   }
    }
 }
}

HTMLは以下の通り

<table id="dataTable">
  <tr onclick="highlight()"><td>Data1</td><td>Data2</td></tr>
  <tr onclick="highlight()"><td>Data1</td><td>Data2</td></tr>
  <tr onclick="highlight()"><td>Data1</td><td>Data2</td></tr>
</table>

現在、クリックすると色が変わりますが、2 番目の行をクリックすると、最初の行が強調表示されたままになります。jqueryなしでこのタスクを達成するのを手伝ってくれませんか?

ありがとうございました。

4

5 に答える 5

3

クリックした行を変更するだけなので、他の行のハイライトを解除する必要があります。

function highlight(){
 var table = document.getElementById('dataTable');
 for (var i=0;i < table.rows.length;i++){
  table.rows[i].onclick= function () {
   if(!this.hilite){
    unhighlight();
    this.origColor=this.style.backgroundColor;
    this.style.backgroundColor='#BCD4EC';
    this.hilite = true;
   }
   else{
    this.style.backgroundColor=this.origColor;
    this.hilite = false;
   }
    }
 }
}

function unhighlight(){
 var table = document.getElementById('dataTable');
 for (var i=0;i < table.rows.length;i++){
   var row = table.rows[i];
   row.style.backgroundColor=this.origColor;
   row.hilite = false;
 }
}
于 2013-01-21T17:03:22.857 に答える