将表添加到表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

回答

相关问题