クラスをテーブル列に追加する

Question

3つの列を持つテーブルがあり、3番目の列にアクセスする必要があります。私はチェックする必要がありますこの列の項目が値として国を持っている場合、それが本当である場合、クラスを追加します。

jQueryを使用しないとどうすればできますか？ここで

Answer 1

使用、さらに操作することを得ます行。ここで

var cells = document.querySelectorAll('td:nth-child(3)'); 
 

 
for(var i = 0 ; i < cells.length ; i++) { 
 
    if(cells[i].textContent.trim() > '') { 
 
    cells[i].classList.add('present'); 
 
    } 
 
}

.present { 
 
    background: orange; 
 
}

<table> 
 
    <tr><th>First name</th><th>Last name<th>Country 
 
    <tr><td>Thomas </td><td>Doe  </td><td>Australia</td> 
 
    <tr><td>Richard </td><td>Webster </td><td>   </td> 
 
    <tr><td>Harold </td><td>Hooligan </td><td>USA  </td> 
 
</table>

Answer 2

<table id="table"> 
    <tr> 
    <td>Jill</td> 
    <td>Smith</td> 
    <td>Poland</td> 
    </tr> 
    <tr> 
    <td>Eve</td> 
    <td>Jackson</td> 
    <td>Germany</td> 
    </tr> 
    <tr> 
    <td>Joe</td> 
    <td>Jackson</td> 
    <td>France</td> 
    </tr> 
</table> 

あなたはすべての行を通じトラバースすることができ、それぞれの第三のセルをつかむためのセレクタとしてtd:nth-child(3)で、第三列innerHTMLのはquerySelectorAll()

var rowLength = document.getElementById('table').rows.length; 
for(var i = 0;i<rowLength;i++){ 
    console.log(document.getElementById('table').rows[i].cells[2].innerHTML); 
} 

Answer 3

が楽しい方法で、https://jsfiddle.net/c259LrpL/1/

var t = document.getElementById("table"); 
var trs = t.getElementsByTagName("td"); 
var tds = null; 

for (var i=0; i<trs.length; i++) 
{ 
    tds = trs[i].getElementsByTagName("td"); 
    for (var n=0; n<trs.length;n++) 
    { 
     if ((n+1) %3 == 0){ 
     trs[n].classList.add("new_class"); 
     } 
    } 
} 

Answer 4

HTML：セルのtextContentが空でないときに、クラスを追加するコレクションを

反復、

<table id='mytable'> 
    <tr> 
     <td class="first">Name</td> 
     <td class="second">Occupation</td> 
     <td class="third">Country</td> 
    </tr> 
    <tr> 
     <td class="first">Name</td> 
     <td class="second">Occupation</td> 
     <td class="third"></td> <!-- empty --> 
    </tr> 
    <tr> 
     <td class="first">Name2</td> 
     <td class="second">Occupation2</td> 
     <td class="third">Country2</td> 
    </tr> 
    </table> 

Javascriptを

var Elements = document.getElementById("mytable").getElementsByClassName("third"); 

    alert(Elements.length); 
    for (var i=0; i < Elements.length; i++) { 
    if (Elements[i].textContent != "") { 
     alert(Elements[i].textContent + " adding class"); 
      Elements[i].className += "new"; 
    } 
    } 

CSS

.new { 
    background-color: lightblue; 
} 

ワーキングJSFiddle：https://jsfiddle.net/codeforwin/scyw2by0/