CODEWITHSUNDEEP
javascripthtmlcss
Tannmay S Gupta
Tannmay S Gupta

Reputation: 33

Nth child in table not working Javascript

The td:nth-child('n') is not working over in my table it gives null in the log Where as it is working when i use children[n] it is a simple function for searching

I couldn't find the reason why it is giving out a null.. Here is the code 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>Table Searching</title>
<style>
    th{
        font-weight: bolder;
    }
    table, th, td{
        font-size: 20px;
        border: 2px solid black;
        border-collapse: collapse;
    }
</style>
</head>
<body>
<input type="text" name="search">
<button class="s" onclick="Search()">Search by Name</button>
<button class="s" onclick="Search()">Search by Country</button>
<button class="s" onclick="Search()">Search by Pet</button>
<table>
    <tr>
        <th>Name</th>
        <th>Country</th>
        <th>Pet</th>
    </tr>
    <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>
</table>
<script>
    var input=document.getElementsByName("search")[0];
    var s=document.getElementsByClassName("s");
    var n=0;

    function Search(){
    for (var j=0; j<s.length; j++) 
    {
        console.log("element");
        console.log(s[j]);
        console.log("target");
        console.log(event.target);
        if(s[j]==event.target){
            n=j;
            console.log(n);
        }
    }
        var val= input.value;
        var a=document.querySelectorAll("table > tbody > tr");
        console.log(a);
        for(var i =0; i<a.length; i++)
        {
            var d = a[i].querySelector('td:nth-child("+n+")');
            console.log(d);
            if(d.innerHTML.toLowerCase()==val.toLowerCase()){
                a[i].style.display="";
            }
            else
            {
                a[i].style.display="none";
            }
        }
    }
</script>
</body>
</html>

Upvotes: 1

Views: 3749

Answers (2)

GURU PRASAD
GURU PRASAD

Reputation: 483

scrollToNthChild = (): *  => {
var tableBody = document.getElementById('event-table-body');
var tableRows = tableBody.getElementsByTagName('tr');
let targetElement = tableRows[7];
targetElement.scrollIntoView();

}

Upvotes: 0

Richard Casetta
Richard Casetta

Reputation: 446

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

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

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

  3. 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!

Upvotes: 1

Related Questions