Using Nth-Child in Tables Tr Td

using nth-child in tables tr td

table tr td:nth-child(2) {
    background: #ccc;
}

Working example: http://jsfiddle.net/gqr3J/

Using nth-child in tables tr td to get Values and Find Total

function addRow()  {
    var table = document.getElementById("datatable"),      newRow = table.insertRow(table.length),      cell1 = newRow.insertCell(0),      cell2 = newRow.insertCell(1),      cell3 = newRow.insertCell(2),

      name = document.getElementById("form").value,      amount = document.getElementById("amount").value;

      delete1 = delete1 = '<input type="button"  class="btn btn-danger" class="glyphicon glyphicon-trash"id="delete" value="Delete" onclick="deleteRow(this)">';    cell1.innerHTML = name;    cell2.innerHTML = amount;    cell3.innerHTML = delete1;     findTotal();  }

 function findTotal(){   var arr = document.querySelectorAll("#datatable td:nth-child(2)");     var tot=0;
   for(var i=0;i<arr.length;i++){      var enter_value   = Number(arr[i].textContent) //id u want do parseInt(enter_value)      if(enter_value)                tot += Number(arr[i].textContent);      }   document.getElementById('total').value = parseInt(tot); }

<div class="col-md-5" style="display: inline-block; "> <div class="jumbotron">  <h2>Type in Nature of Collection...</h2>   <form>       <input class="form-control input-lg" id="form" list="languages" placeholder="Search" type="text" required>     <br>     <input class="form-control input-lg" id="amount" list="languages" placeholder="Amount" type="number" required>     <br>     <button onclick="addRow(); return false;">Add Item</button>   </form>
   <table id="datatable" class="table table-striped table-bordered" cellspacing="0" width="100%">    <thead>     <tr>       <th>Nature of Collection</th>       <th>Amount</th>       <th></th>     </tr>   </thead>   <tbody>     <tr>
     </tr>   </tbody>  </table>
  <h6> <label>Date:<span></span>  </label>{{date}}</h6>
  <h3><fieldset disabled>  <label>Total </label>  <input type = "text" name = "total" id="total"><br></p>  </fieldset></h3>  </div><!-- COL5 END -->

How to use nth-child for styling with a table with rowspan?

Unfortunately, there's no way to do this with :nth-child() alone, or by using CSS selectors alone for that matter. This has to do with the nature of :nth-child() which selects purely based on an element being the nth child of its parent, as well as with CSS's lack of a parent selector (you can't select a tr only if it doesn't contain a td[rowspan], for example).

jQuery does have the :has() selector that CSS lacks, though, which you can use in conjunction with :even (not :odd as it's 0-indexed versus :nth-child()'s 1-index) for filtering as an alternative to CSS:

$('tr:not(:has(td[rowspan])):even')

jsFiddle preview

Nth child in table not working Javascript

Here are the three reasons why you are giving out null in your code:

First, as stated by Satpal, this code 'td:nth-child("+n+")' will not replace n by its value. It's like writing td:nth-child("+n+") in css.
The solution for this is to write: 'td:nth-child(' + n + ')'. You then concatenate the value of n with the rest of the string
The value of n is an index in a array, so it starts at 0 and ends at array.length - 1. The problem is that the nth-child selector actually selects the nth-child (brilliant naming), so if n is 0 (in the case of searching by name), you'll try to select the 0th-child, wihich doesn't exist... You then have to write: 'td:nth-child(' + (n + 1) + ')' or change the definition of n
You have no <tbody> tag in your HTML. Which means that all the content of the table will be wrapped in a tbody and your selector document.querySelectorAll("table > tbody > tr")will also selects the header of your table. To avoid that, change your HTML accordingly.

Something like that:

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Country</th>
            <th>Pet</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Abhi</td>
            <td>Canada</td>
            <td>koala</td>
        </tr>
        <tr>
            <td>Riya</td>
            <td>France</td>
            <td>Parrot</td>
        </tr>
        <tr>
            <td>Sid</td>
            <td>UK</td>
            <td>Pig</td>
        </tr>
        <tr>
            <td>Kritika</td>
            <td>Germany</td>
            <td>Cat</td>
        </tr>
        <tr>
            <td>Kartik</td>
            <td>China</td>
            <td>Frog</td>
        </tr>
        <tr>
            <td>Radhika</td>
            <td>India</td>
            <td>Dog</td>
        </tr>
    </tbody>
</table>

Here is a jsfiddle where the search works fine: https://jsfiddle.net/n23685b6/1/

Hope this helps!

Modifying nth child for table cells

You can either apply the .Date background on tr:nth-child(odd) or tr:not(:nth-child(even))

.TabSymbols tr:nth-child(even) { background-color: #f2f2f2; }/*.TabSymbols tr:nth-child(odd) .Date { background: #666; color: #fff; }*/.TabSymbols tr:not(:nth-child(even)) .Date { background: #666; color: #fff; }

<table class="TabSymbols">  <tr>    <td class="Date">foo</td>    <td>foo</td>    <td>foo</td>    <td>foo</td>  </tr>  <tr>    <td>foo</td>    <td>foo</td>    <td class="Date">foo</td>    <td class="Date">foo</td>  </tr>  <tr>    <td>foo</td>    <td>foo</td>    <td class="Date">foo</td>    <td>foo</td>  </tr>  <tr>    <td>foo</td>    <td class="Date">foo</td>    <td>foo</td>    <td>foo</td>  </tr></table>

nth-child not working with CSS table-cell

The nth-child selector does not operate from the parent's perspective
so can you please add below css and see results

 .table .cell:nth-child(1) {
                background-color: red;
                width: 10%;
                }

                .table .cell:nth-child(2) {
                background-color: green;
                width: 50%;
                }

                .table .cell:nth-child(3) {
                background-color: blue;
                width: 20%;
                }

Use nth-child for a repeating range of table rows

You can use formulas in nth-child:

tr:nth-child(6n+1), tr:nth-child(6n+2), tr:nth-child(6n+3) {
    background-color: green;
}

This will select every 6th child and the two subsequent ones (means: always the first three out of six).

Tailored to your example:

tr:nth-child(6n+1), tr:nth-child(6n+2), tr:nth-child(6n+3) { background-color: green;}

<table border=1><tr>    <td width='30px' rowspan='3'>1</td>    <td width='150px'>1</td>    <td width='150px'>1</td></tr><tr>    <td width='150px'>2</td>    <td width='150px'>2</td></tr><tr class='trContacts'>    <td colspan='3'>3</td></tr><tr>    <td width='30px' rowspan='3'>4</td>    <td width='150px'>4</td>    <td width='150px'>4</td></tr><tr>    <td width='150px'>5</td>    <td width='150px'>5</td></tr><tr class='trContacts'>    <td colspan='3'>6</td></tr><tr>    <td width='30px' rowspan='3'>7</td>    <td width='150px'>7</td>    <td width='150px'>7</td></tr><tr>    <td width='150px'>8</td>    <td width='150px'>8</td></tr><tr class='trContacts'>    <td colspan='3'>9</td></tr><tr>    <td width='30px' rowspan='3'>10</td>    <td width='150px'>10</td>    <td width='150px'>10</td></tr><tr>    <td width='150px'>11</td>    <td width='150px'>11</td></tr><tr class='trContacts'>    <td colspan='3'>12</td></tr></table>

nth-child doesnt apply background-color correctly in the table

If you want to add background-color for every 2nd child (every even child: 2, 4, 6...), you need to use nth-child(even)

Check out this snippet of even, odd selectors.

Why is CSS selector 'table tr:not(tr:nth-child(even))' throwing a TypeError?

While this selector does not (throws a TypeError):
document.querySelectorAll('table tr:not(tr:nth-child(even))');

:not() only takes a “simple selector”, and tr:nth-child(even) isn’t one.

https://drafts.csswg.org/selectors-3/#simple-selectors-dfn:

A simple selector is either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.

Either is the important keyword here. Only one of those selector types is allowed, not combinations of them.