第N個孩子沒有工作的Javascript

的td:nth-child('n')沒有在我的工作表上它給人的日誌在哪裏，因爲它是在工作的空當我使用children[n]它是用於搜索第N個孩子沒有工作的Javascript

我無法找到一個簡單的函數爲什麼它被賦予了一個空。這裏的原因是代碼

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

來源

2017-07-04 Tannmay S Gupta

使用正確引號''td：nth-child（'+ n +'）'） – Satpal

使用表格對象和表格列集合是一個更快的解決方案。 –

我已經試過td：nth-child（'+ n +'）'沒有工作，所以改變了代碼感謝 –

這裏有三個原因，你在你的代碼發放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孩子，而不存在。你必須寫：'td：nth-child（'+（n + 1）+'）'或更改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/

希望這有助於！

來源

2017-07-04 11:42:15

感謝您的解決方案，它確實工作，但沒有任何其他方式我可以得到索引權不改變N' 的'定義有點像'.EQ（）'jQuery中@RichardCasetta –

你好Tannmay，這裏是你可以做什麼：更換'A [1] .querySelector（」 td：nth-child（'+ n +'）'）'由'a [i] .querySelectorAll（'td'）[n]'。然後你會選擇所有的'td'作爲一個數組（這很好，因爲'n'是一個數組中的索引，所以你只需要在第n個地方選擇這個元素，這裏是更新後的jsfiddle：https： //jsfiddle.net/n23685b6/2/ 希望這有助於 –

第N個孩子沒有工作的Javascript

回答

相關問題