Question

＆＃13;

<!DOCTYPE html>
<html>
<head>
<style>
 tr	,table,td
{
border:black solid 1px;
text-align:center;
}
table
{
border-collapse:collapse;
}
#ab
{
background-color:cyan;
}
</style>
</head>
<body>

<table style="width:100%">
<tbody>
<tr id='ab'>
    <th>Name</th>
    <th>work</th>		
    <th>payment</th>
  </tr>  
<tr>
    <td>Jill</td>
    <td>Smith</td>		
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>		
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>		
    <td>80</td>
  </tr>
</tbody>
<tbody>
<tr id='ab'>
    <th>Name</th>
    <th>work</th>		
    <th>payment</th>
  </tr>  
<tr>
    <td>Jill</td>
    <td>Smith</td>		
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>		
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>		
    <td>80</td>
  </tr>
</tbody>
<tbody>
<tr id='ab'>
    <th>Name</th>
    <th>work</th>		
    <th>payment</th>
  </tr>  
<tr>
    <td>Jill</td>
    <td>Smith</td>		
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>		
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>		
    <td>80</td>
  </tr>
</tbody>
<tbody>
<tr id='ab'>
    <th>Name</th>
    <th>work</th>		
    <th>payment</th>
  </tr>  
<tr>
    <td>Jill</td>
    <td>Smith</td>		
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>		
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>		
    <td>80</td>
  </tr>
</tbody>
<tbody>
<tr id='ab'>
    <th>Name</th>
    <th>work</th>		
    <th>payment</th>
  </tr>  
<tr>
    <td>Jill</td>
    <td>Smith</td>		
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>		
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>		
    <td>80</td>
  </tr>
</tbody>
</table>

</body>
<script >
 	

 

</script>

</html>

＆＃13;

我想只选择元素类型为<tr>的行（<th>）并找到parentelement并隐藏内容[<td>] 我如何改进这个

prop = document.getElementsByTagName("th");
a = prop[0].parentNode.parentNode.children;
for(var i=1;i<a.length;i++){
   a[i].style.display="none";
}

Answer 1

在每个表行绑定onclick事件，并在触发onclick时隐藏/显示父tbody。

var tableSection = document.getElementsByClassName("ab");

for(var i = 0; i < tableSection.length; i++){
    tableSection[i].onclick = function(){
        var tbody = this.parentNode;
        for(var j = 1; j < (tbody.childNodes.length/3) + 1; j++){
            var status = tbody.getElementsByTagName("tr")[j].style.display;
            if(status == "" || status == "block"){
                tbody.getElementsByTagName("tr")[j].style.display = 'none';
            } else{
                tbody.getElementsByTagName("tr")[j].style.display = '';
            }
        }
    };    
}

jsFiddle

Answer 2

<table class='tblinfo' style="width: 100%">
<thead>
    <tr>
        <th>Name</th>
        <th>work</th>
        <th>payment</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
    </tr>
    <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
    <tr>
        <td>John</td>
        <td>Doe</td>
        <td>80</td>
    </tr>
    <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
    </tr>
    <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
    <tr>
        <td>John</td>
        <td>Doe</td>
        <td>80</td>
    </tr>
    <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
    </tr>
    <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
    <tr>
        <td>John</td>
        <td>Doe</td>
        <td>80</td>
    </tr>
    <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
    </tr>
    <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
    <tr>
        <td>John</td>
        <td>Doe</td>
        <td>80</td>
    </tr>
    <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
    </tr>
    <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
    <tr>
        <td>John</td>
        <td>Doe</td>
        <td>80</td>
    </tr>
</tbody>

我认为您想要做的是在HTML代码之上。如果你正在使用table，那么元素（你想要显示为标题的元素）应该在thead中，而其他内容应该在tbody元素中。

要选择表格的元素，下面是代码：

$('.tblinfo thead tr th').addClass('tablehead');

Answer 3

props=document.getElementsBytagName('td');
for(var i in props)
{
props[i].style.display="none";
}*/
prop=document.getElementsByTagName("th");
for(var i in prop)
{
prop[i].onclick=b;
}

function b()
{
	a= this.parentNode.parentNode.children;
	if(a[1].style.display=="")
	{
		for(var i=1;i<a.length;i++)
			{
				a[i].style.display="none";
			}

	}
	else
	{
	for(var i=1;i<a.length;i++)
			{
				a[i].style.display="";
			}

	}
}

Answer 4

 
prop=document.getElementsByTagName("th");
for(var i in prop)
{
  prop[i].onclick=b;
}

function b()
{
	a= this.parentNode.parentNode.children;
	
    if(a[1].style.display=="")
	{
		    for(var i=1;i<a.length;i++)
		 	{
				a[i].style.display="none";
			}

	}
	else
	{
	        for(var i=1;i<a.length;i++)
			{
				a[i].style.display="";
			}

	}
}

用js显示和隐藏表中的元素

4 个答案: