將表添加到表colum

我有一個三列的表，需要訪問第三列。我必須檢查如果這個列中的項目有國家作爲價值，如果它是真的添加一個類。將表添加到表colum

如何在沒有jQuery的情況下執行此操作？

2016-04-25 Franco Manzur

添加類屬性，每行的第三個td標籤。然後，您可以使用DOM按類獲取元素並檢查其值 – alamoot

爲什麼你需要一個類？如果你現在可以在css中選擇第三個專欄，那麼它也可以工作嗎？ –

表格行具有從零開始的索引。表單元格在其行中也有一個索引，從零開始。因此，第一行中的第三列應該是'tableRef.rows [0] .cells [2]'，以此類推，對於每行中的第三個單元格。但很可能有一個選擇器將它們作爲一個集合。你可以考慮添加一個* colgroup *元素。 – RobG

使用querySelectorAll()被操縱，以td:nth-child(3)作爲選擇抓住每一個第三單元行。

迭代通過收集，添加類時細胞的textContent不爲空：

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>

來源

2016-04-25 23:26:31

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

在這裏，您可以遍歷所有的行，並獲得第3列的innerHTML進一步

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

來源

2016-04-25 23:25:42

這是一個有趣的方式，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"); 
     } 
    } 
}

來源

2016-04-25 23:29:41

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

工作的jsfiddle：https://jsfiddle.net/codeforwin/scyw2by0/

來源

2016-04-25 23:39:33 codeforwin

將表添加到表colum

回答

相關問題