Klasse zu einer Tabellenspalte hinzufügen

Question

Ich habe eine Tabelle mit drei Spalten und muss auf die dritte Spalte zugreifen. Ich muss prüfen, ob die Elemente in dieser Spalte ein Land als Wert haben und wenn es wahr ist, fügen Sie eine Klasse hinzu.

Wie kann ich es ohne jQuery tun?

Answer 1

Verwenden querySelectorAll() manipuliert werden, mit td:nth-child(3) als Wähler die dritte Zelle von jedem zu greifen Reihe.

Iterate durch die Sammlung, die Klasse hinzugefügt, wenn die Zelle textContent nicht leer ist:

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>

ist

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> 

Hier können Sie alle Zeilen durchqueren und die 3. Spalte innerHTML- erhalten weiter

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

Hier ist eine unterhaltsame Art und Weise, 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

<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; 
} 

Arbeits JSFiddle: https://jsfiddle.net/codeforwin/scyw2by0/