Question

td:nth-child('n')在我的表中没有工作，它在日志中给出null当我使用children[n]时它正在工作它是一个简单的搜索功能

我找不到它给出null的原因..这是代码

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

Answer 1

以下是您在代码中发出null的三个原因：

首先，正如Satpal所述，此代码'td:nth-child("+n+")' 不会将n替换为其值。这就像在CSS中写td:nth-child("+n+")一样。解决方案是写：'td:nth-child(' + n + ')'。然后，您将n的值与字符串的其余部分
n的值是数组中的索引，因此它从0开始，到array.length - 1结束。问题是nth-child选择器实际上选择了第n个孩子（精彩命名），所以如果n是0（在按名称搜索的情况下），那么你就可以了尝试选择第0个孩子，因为它不存在......然后你必须写：＆＃39; td：nth-child（＆＃39; +（n + 1）+＆＃39;）＆＃39;或更改n
您的HTML中没有<tbody>标记。这意味着表格的所有内容都将包含在tbody中，您的选择器document.querySelectorAll("table > tbody > tr")也会选择表格的标题。为避免这种情况，请相应地更改HTML。

类似的东西：

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

这是一个搜索工作正常的jsfiddle：https://jsfiddle.net/n23685b6/1/

希望这有帮助！

Answer 2

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

}

表中的第N个孩子不工作Javascript

2 个答案: