通过js在表中显示和隐藏元素

show and hide element in table by js

本文关键字：隐藏 元素 显示 js 通过      更新时间：2024-05-08

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

我只想扫描元素类型为<th>的那些行（<tr>），然后查找parentclement并隐藏内容[<td>]我如何改进这个

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

<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，那么th元素（要显示为表头的元素）应该在ad内，其他元素都应该在body元素内。

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

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

将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

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="";
			}
	}
}

 
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="";
			}
	}
}

相关文章：