forループがテーブルセルをループしないのはなぜですか？ JavaScript

テーブルを持っていて、セルに含まれるボタンがクリックされたときに各セルを繰り返し処理する必要があります。しかし、ループは実行されていないようで、私は問題を見つけることができません。ここforループがテーブルセルをループしないのはなぜですか？ JavaScript

は、コードスニペットです：

element.onclick = function() { 
 

 
     //Sets color of selected element 
 
     for (var i = 0, cell; cell = document.getElementById('targetLocation').row.cells[i]; i++) { 
 

 
      if (cell.firstChild.style.background == "rgba(223, 22, 22, 0.53)") { 
 
        
 
       cell.firstChild.style.background = 'red'; 
 
      } 
 

 
      else { 
 
       alert('Despite all, I loop') 
 
      }; 
 
     }; 
 
    };

<table id="targetLocation"> 
 
     <tr> 
 
      <th></th> 
 
      <th>A</th> 
 
      <th>B</th> 
 
      <th>C</th> 
 
      <th>D</th> 
 
      <th>E</th> 
 
      <th>F</th> 
 
      <th>G</th> 
 
      <th>H</th> 
 
      <th>I</th> 
 
      <th>J</th> 
 
     </tr> 
 
     <tr> 
 
      <th>1</th> 
 
      <td><button class="cells" onmouseover="getTarget(this)">O</button></td> 
 
      <td><button class="cells" onmouseover="getTarget(this)">O</button></td> 
 
      <td><button class="cells" onmouseover="getTarget(this)">O</button></td> 
 
      <td><button class="cells" onmouseover="getTarget(this)">O</button></td> 
 
      <td><button class="cells" onmouseover="getTarget(this)">O</button></td> 
 
      <td><button class="cells" onmouseover="getTarget(this)">O</button></td> 
 
      <td><button class="cells" onmouseover="getTarget(this)">O</button></td> 
 
      <td><button class="cells" onmouseover="getTarget(this)">O</button></td> 
 
      <td><button class="cells" onmouseover="getTarget(this)">O</button></td> 
 
      <td><button class="cells" onmouseover="getTarget(this)">O</button></td> 
 
     </tr> 
 
    </table>

ここでは、関連するJavaScriptです：明確にするため

： "要素" は、あなたが上にマウスを移動している要素です。セル上をホバリングすると、背景色はrgba（223、22、22、0.53）に変わります。現在、そのセル上にマウスを置いてそのボタンをクリックすると、赤色に変わるはずです。 onclick関数自体は動作します。たとえば、その関数で警告を設定すると、それはうまくいきますので、forループが壊れていると思います。

出典

2017-10-28 A.S.J

あなたが働いてスニペットを投稿することができますか？ – Nisarg

'行'とは何ですか？ ['rows']（https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement/rows）のみです。 – PeterMader

@PeterMaderヒントありがとう！ –

HTMLTableElementにはrowというプロパティがありません。あなたが特定のインデックスで行要素を選択したい場合は、rowsHTMLCollectionを使用します。私はあなたのシンテックスを修正した

document.getElementById('targetLocation').rows[1].cells[...]

出典

2017-10-28 13:27:49 PeterMader

まあ、エラーを特定するにを部分にあなたのコードの下、このアドバイスのスライスを取り、私がやったことでした彼らはそれだ

document.getElementById('targetLocation').onclick = function() { 
 
trtable = document.getElementById('targetLocation').getElementsByTagName('tr')[1]; 
 
tcells = trtable.getElementsByTagName("td"); 
 
cellcount = tcells.length; 
 
     //Sets color of selected element 
 
     for (var i = 0;i< cellcount; i++) { 
 
    cell = tcells[i]; 
 
      if (cell.firstChild.style.background == "rgba(223, 22, 22, 0.53)") { 
 
        
 
       cell.firstChild.style.background = 'red'; 
 
       console.log('but this time, I found color on cell :'+i); 
 
      } 
 

 
      else { 
 
       console.log('Despite all, I loop'); 
 
      } 
 
     } 
 
    }; 
 
    
 
function getTarget(elem) 
 
{ 
 

 
}

<table id="targetLocation"> 
 
     <tr> 
 
      <th></th> 
 
      <th>A</th> 
 
      <th>B</th> 
 
      <th>C</th> 
 
      <th>D</th> 
 
      <th>E</th> 
 
      <th>F</th> 
 
      <th>G</th> 
 
      <th>H</th> 
 
      <th>I</th> 
 
      <th>J</th> 
 
     </tr> 
 
     <tr> 
 
      <th>1</th> 
 
      <td><button class="cells" onmouseover="getTarget(this)">O</button></td> 
 
      <td><button class="cells" onmouseover="getTarget(this)">O</button></td> 
 
      <td><button class="cells" onmouseover="getTarget(this)" style="background:rgba(223, 22, 22, 0.53);">O</button></td> 
 
      <td><button class="cells" onmouseover="getTarget(this)">O</button></td> 
 
      <td><button class="cells" onmouseover="getTarget(this)">O</button></td> 
 
      <td><button class="cells" onmouseover="getTarget(this)">O</button></td> 
 
      <td><button class="cells" onmouseover="getTarget(this)">O</button></td> 
 
      <td><button class="cells" onmouseover="getTarget(this)">O</button></td> 
 
      <td><button class="cells" onmouseover="getTarget(this)">O</button></td> 
 
      <td><button class="cells" onmouseover="getTarget(this)">O</button></td> 
 
     </tr> 
 
    </table>

出典

2017-10-28 13:44:32 M0ns1f

、ループのすべてのtrが第2のTRからすべてのtdをゲットタグ要素のスタイル属性をハードコードするのは悪い習慣です。

代わりにCSSクラスを使用してください。

また、今後変更される可能性のあるプロパティ（色）の条件を作成します。それはエラーになりやすいです。それをしないでください。

代わりにCSSクラスを使用してください。

あなたのコードはなるかもしれない：

document.getElementById('targetLocation').onclick = function() { 
 
trtable = document.getElementById('targetLocation').getElementsByTagName('tr')[1]; 
 
tcells = trtable.getElementsByTagName("td"); 
 
cellcount = tcells.length; 
 

 
//Sets color of selected element 
 
for (var i = 0 ; i< cellcount; ++i) { 
 
    cell = tcells[i]; 
 

 
    // Condition is against class only, aspect can change 
 
    // => good practice 
 

 
    if (cell.firstChild.className.indexOf("selected") > -1) { 
 
      
 
    // Here you should use CSS class too 
 
    // What if your designer wants to apply a more beautifull color? 
 
    // cell.firstChild.style.background = 'red'; 
 
    // So: 
 
    cell.firstChild.className = 'someRed'; 
 

 
    console.log('but this time, I found color on cell :'+i); 
 
    } 
 

 
    else { 
 
     console.log('Despite all, I loop'); 
 
    } 
 
} 
 
}; 
 
    
 
function getTarget(elem){}

button.selected { 
 
    background:rgba(223, 22, 22, 0.53); 
 
} 
 

 
.someRed { 
 
    background-color: red ; // or anything else 
 
}

<table id="targetLocation"> 
 
    <tr> 
 
     <th></th> 
 
     <th>A</th><th>B</th><th>C</th><th>D</th><th>E</th><th>F</th><th>G</th><th>H</th><th>I</th><th>J</th> 
 
    </tr> 
 
    <tr> 
 
    <th>1</th> 
 
    <td><button class="cells" onmouseover="getTarget(this)">O</button></td> 
 
    <td><button class="cells" onmouseover="getTarget(this)">O</button></td> 
 
    <td><button class="cells selected" onmouseover="getTarget(this)">O</button></td> 
 
    <td><button class="cells" onmouseover="getTarget(this)">O</button></td> 
 
    <td><button class="cells" onmouseover="getTarget(this)">O</button></td> 
 
    <td><button class="cells" onmouseover="getTarget(this)">O</button></td> 
 
    <td><button class="cells" onmouseover="getTarget(this)">O</button></td> 
 
    <td><button class="cells" onmouseover="getTarget(this)">O</button></td> 
 
    <td><button class="cells" onmouseover="getTarget(this)">O</button></td> 
 
    <td><button class="cells" onmouseover="getTarget(this)">O</button></td> 
 
    </tr> 
 
</table>

出典

2017-10-28 15:27:09

forループがテーブルセルをループしないのはなぜですか？ JavaScript

答えて

関連する問題