N-й ребенок в таблице не работает Javascript

77
8

td:nth-child('n') не работает в моей таблице, он дает null в журнале. Где он работает, когда я использую children[n] это простая функция для поиска

Я не мог найти причину, по которой он выдаёт нуль. Вот код

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

спросил(а) 2021-01-25T22:27:07+03:00 4 месяца, 3 недели назад
1
Решение
63

Вот три причины, по которым вы выдаете null в своем коде:

Во-первых, как указал Сатпал, этот код 'td:nth-child("+n+")' не заменит n на его значение. Это похоже на запись td:nth-child("+n+") в css. Для этого нужно написать: 'td:nth-child(' + n + ')'. Затем вы объединяете значение n с остальной частью строки

Значение n является индексом в массиве, поэтому оно начинается с 0 и заканчивается на array.length - 1. Проблема в том, что селектор nth-child самом деле выбирает nth-child (блестящее именование), поэтому, если n равно 0 (в случае поиска по имени), вы попытаетесь выбрать 0-й-ребенок, существуют... Затем вам нужно написать: 'td: nth-child (' + (n + 1) + ')' или изменить определение n

В вашем HTML-теге нет <tbody>. Это означает, что все содержимое таблицы будет завернуто в tbody а ваш selector 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/

Надеюсь это поможет!

ответил(а) 2021-01-25T22:27:07+03:00 4 месяца, 3 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема