从元素内部获取tr

时间：2017-07-14 09:22:05

标签： javascript jquery html css

这是一个简单的HTML代码：

＆＃13;
＆＃13; 
<html>
    <head>
    </head>
    <body>
    <input id="pathText" type="text" name="Summary" placeholder="Summary"><br>
    <input id="groupText" type="text" name="Groups" placeholder="Groups"><br>
    <input id="searchButton" type="button" value="Search" onclick="myFunction()"><br>
    <table>
    	<tr>
    		<details class="mainDetails">
    			<summary><b>First Summary</b></summary>
    			<ul>
    				<details>
    					<summary><b>Groups</b></summary>
    					<ul>
    						<li>group A of First</li>
    						<li>group B of First</li>
    					</ul>
    				</details>
    				<details>
    					<summary><b>First People</b></summary>
    					<ul>
    						<li>John</li>
    						<li>Mark</li>
    					</ul>
    				</details>
    			</ul>
    		</details>
    	</tr>
    	<tr>	
    		<details class="mainDetails">
    			<summary><b>Second Summary</b></summary>
    			<ul>
    				<details>
    					<summary><b>Groups</b></summary>
    					<ul>
    						<li>group A of Second</li>
    						<li>group B of Second</li>
    						<li>group C of Second</li>
    					</ul>
    				</details>
    				<details>
    					<summary><b>Second People</b></summary>
    					<ul>
    						<li>Alex</li>
    					</ul>
    				</details>
    			</ul>
    		</details>
    	</tr>
    </table>
    
    <script>
    
    	function myFunction(){
    		var pathString = document.getElementById('pathText').value;
    		var summariesElements=document.getElementsByTagName("summary");
    		for(i=0;i<summariesElements.length;i++){
    			if(summariesElements[i].innerHTML.indexOf(pathString) !== -1){
    				if(summariesElements[i].parentElement.className === "mainDetails"){
    					alert(summariesElements[i].parentElement.className);
    					summariesElements[i].parentElement.style.display = "none"; 
    				}
    			}
    		}
    	}
    </script>
    </body>	
    </html>
＆＃13;
＆＃13;
＆＃13;

我想隐藏来自tr String的摘要包含pathText的详细信息中的input元素。 在我的代码中，我知道如何通过使用mainDetails隐藏它来获取myFunction()元素。

我尝试添加class="trClass"并修改此功能以获取tr元素并使用display="none"。我用的是：

function myFunction(){
        var pathString = document.getElementById('pathText').value;
        var summariesElements=document.getElementsByTagName("summary");
        for(i=0;i<summariesElements.length;i++){
            if(summariesElements[i].innerHTML.indexOf(pathString) !== -1){
                alert(summariesElements[i].parentElement.parentElement.className);
                if(summariesElements[i].parentElement.parentElement.className === "trClass"){
                summariesElements[i].parentElement.parentElement.style.display = "none"; 
                }
            }
        }
    }

但是有一个问题，因为summariesElements[i].parentElement.parentElement没有返回tr元素，只返回body。

如何更改我的代码并使用它来隐藏tr中的table？

2 个答案:

答案 0 :(得分：0)

您错过了行的td（列）元素。一行必须至少有一列。

<tr>
<td>
<!-- content goes here -->
</td>
</tr>

此外，要获取行引用而不是

summariesElements[i].parentElement.parentElement

你可以使用

summariesElements[i].closest('tr')

请检查JsFiddle演示如何使用jQuery实现相同

以下是您的编码修复，主要是添加td代码

<html>

<head>
</head>

<body>
  <input id="pathText" type="text" name="Summary" placeholder="Summary"><br>
  <input id="groupText" type="text" name="Groups" placeholder="Groups"><br>
  <input id="searchButton" type="button" value="Search" onclick="myFunction()"><br>
  <table>
    <tr>
      <td>
        <details class="mainDetails">
          <summary><b>First Summary</b></summary>
          <ul>
            <details>
              <summary><b>Groups</b></summary>
              <ul>
                <li>group A of First</li>
                <li>group B of First</li>
              </ul>
            </details>
            <details>
              <summary><b>First People</b></summary>
              <ul>
                <li>John</li>
                <li>Mark</li>
              </ul>
            </details>
          </ul>
        </details>
      </td>
    </tr>
    <tr>
      <td>
        <details class="mainDetails">
          <summary><b>Second Summary</b></summary>
          <ul>
            <details>
              <summary><b>Groups</b></summary>
              <ul>
                <li>group A of Second</li>
                <li>group B of Second</li>
                <li>group C of Second</li>
              </ul>
            </details>
            <details>
              <summary><b>Second People</b></summary>
              <ul>
                <li>Alex</li>
              </ul>
            </details>
          </ul>
        </details>
      </td>
    </tr>
  </table>

  <script>
    function myFunction() {
      var pathString = document.getElementById('pathText').value;
      var summariesElements = document.getElementsByTagName("summary");
      for (i = 0; i < summariesElements.length; i++) {
        if (summariesElements[i].innerHTML.indexOf(pathString) !== -1) {
          if (summariesElements[i].parentElement.className === "mainDetails") {
            //alert(summariesElements[i].parentElement.className);
            summariesElements[i].parentElement.style.display = "none";
          }
        }
      }
    }
  </script>
</body>

</html>

答案 1 :(得分：0)

试试这个：
我已经修正了标记以包含td元素和关闭脚本 我还使用了querySelector / querySelectorAll，这为获取DOM节点增加了一点灵活性。
查看这些命令使用的CSSSelectors docs 所以你实际上可以通过id，class，＆＃39;标记A＆＃39;来查找。在标签B＆＃39;内，直接后代等。
这是JSFiddle 

<html>
<head>
</head>
<body>
<input id="pathText" type="text" name="Summary" placeholder="Summary"><br>
<input id="groupText" type="text" name="Groups" placeholder="Groups"><br>
<input id="searchButton" type="button" value="Search" onclick="myFunction()"><br>
<table>
    <tr><td>
        <details class="mainDetails">
            <summary><b>First Summary</b></summary>
            <ul>
                <details>
                    <summary><b>Groups</b></summary>
                    <ul>
                        <li>group A of First</li>
                        <li>group B of First</li>
                    </ul>
                </details>
                <details>
                    <summary><b>First People</b></summary>
                    <ul>
                        <li>John</li>
                        <li>Mark</li>
                    </ul>
                </details>
            </ul>
        </details>
    </td></tr>
    <tr><td>    
        <details class="mainDetails">
            <summary><b>Second Summary</b></summary>
            <ul>
                <details>
                    <summary><b>Groups</b></summary>
                    <ul>
                        <li>group A of Second</li>
                        <li>group B of Second</li>
                        <li>group C of Second</li>
                    </ul>
                </details>
                <details>
                    <summary><b>Second People</b></summary>
                    <ul>
                        <li>Alex</li>
                    </ul>
                </details>
            </ul>
        </details>
    </td></tr>
</table>

<script>

    function myFunction(){
        var inputValue = document.querySelector('#pathText').value;
        var trElements=document.querySelectorAll("tr");
        for(i=0;i<trElements.length;i++){
            var summaryText = trElements[i].querySelector("b").innerText
            if (inputValue === summaryText) {
               trElements[i].style.display = "none";
            }
        }
    }
</script>
</body>
</html>
相关问题
最新问题