如何隐藏一个table中的某一行中的某几个元素

我想实现点击一个按钮后隐藏最后一行中的中间3个元素在点击后又显示请教大侠如何实现啊不想用循环来一个个的实现隐藏能不能一次对3个实现隐藏啊

3 个解决方案

#1

你把那三个元素的name或者class属性设为一样的，然后

document.getElementsByName('trName').style.display = 'none';

如果用jquery就更简单了

$('.classname').hide();

#2

首先更正一下1楼，
ie6下，原生js无法根据name来获取非表单对象，如下



<!DOCTYPE HTML>

<html>

	<head>

		<meta charset="gb2312" />

		<title></title>

		<style>


		</style>

	</head>

	<body>

		<table>

			<tr>

				<td name="test">1-123</td>

				<td>1-123</td>

				<td>1-123</td>

			</tr>

		</table>

		<script>

			alert(document.getElementsByName('test')[0])

		</script>

	</body>

</html>

楼主的问题可以用jquery来做，很方便。



<!DOCTYPE HTML>

<html>

	<head>

		<meta charset="gb2312" />

		<title></title>

		<style>

			td {

				border:1px solid red;

			}

		</style>

		<script src="http://code.jquery.com/jquery-latest.js"></script>		

	</head>

	<body>

		<table id="test">

			<tr>

				<td>4</td>

				<td>5</td>

				<td>6</td>

				<td>7</td>

				<td>9</td>

			</tr>

			<tr>

				<td>4</td>

				<td>5</td>

				<td>6</td>

				<td>7</td>

				<td>9</td>

			</tr>			

		</table>

		<button id="btn">click</button>

		<script>

			$('#btn').click(function(){

				var obj = $('#test');

				$('#test tr:last td').each(function(i, k){

					if( i != 0 && $('#test tr:last td').length-1 != i ){

						$(this).toggle();

					}

				})

			})

		</script>

	</body>

</html>

#3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script type="text/javascript">

window.onload = function() {

	document.getElementById('btn').onclick = function() {

		var ar = [1,2,3]; //要隐藏/显示的最后一行单元格索引值的数组

		var tr = document.getElementById('demo').getElementsByTagName('tr');

		var obj = tr[tr.length - 1].getElementsByTagName('td');

		for (var i in ar) {

			if (obj[ar[i]].style.display != 'none') obj[ar[i]].style.display = 'none';

			else obj[ar[i]].style.display = '';

		}

	}

}

</script>

</head>


<body>

<table width="500" border="1" id="demo">

  <tr>

    <td>0-0</td>

    <td>0-1</td>

    <td>0-2</td>

    <td>0-3</td>

    <td>0-4</td>

    <td>0-5</td>

  </tr>

  <tr>

    <td>1-0</td>

    <td>1-1</td>

    <td>1-2</td>

    <td>1-3</td>

    <td>1-4</td>

    <td>1-5</td>

  </tr>

  <tr>

    <td>2-0</td>

    <td>2-1</td>

    <td>2-2</td>

    <td>2-3</td>

    <td>2-4</td>

    <td>2-5</td>

  </tr>

</table>


<input type="button" id="btn" value="show/hide" />

</body>

</html>

#1

你把那三个元素的name或者class属性设为一样的，然后

document.getElementsByName('trName').style.display = 'none';

如果用jquery就更简单了

$('.classname').hide();

#2

首先更正一下1楼，
ie6下，原生js无法根据name来获取非表单对象，如下



<!DOCTYPE HTML>

<html>

	<head>

		<meta charset="gb2312" />

		<title></title>

		<style>


		</style>

	</head>

	<body>

		<table>

			<tr>

				<td name="test">1-123</td>

				<td>1-123</td>

				<td>1-123</td>

			</tr>

		</table>

		<script>

			alert(document.getElementsByName('test')[0])

		</script>

	</body>

</html>

楼主的问题可以用jquery来做，很方便。



<!DOCTYPE HTML>

<html>

	<head>

		<meta charset="gb2312" />

		<title></title>

		<style>

			td {

				border:1px solid red;

			}

		</style>

		<script src="http://code.jquery.com/jquery-latest.js"></script>		

	</head>

	<body>

		<table id="test">

			<tr>

				<td>4</td>

				<td>5</td>

				<td>6</td>

				<td>7</td>

				<td>9</td>

			</tr>

			<tr>

				<td>4</td>

				<td>5</td>

				<td>6</td>

				<td>7</td>

				<td>9</td>

			</tr>			

		</table>

		<button id="btn">click</button>

		<script>

			$('#btn').click(function(){

				var obj = $('#test');

				$('#test tr:last td').each(function(i, k){

					if( i != 0 && $('#test tr:last td').length-1 != i ){

						$(this).toggle();

					}

				})

			})

		</script>

	</body>

</html>

#3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script type="text/javascript">

window.onload = function() {

	document.getElementById('btn').onclick = function() {

		var ar = [1,2,3]; //要隐藏/显示的最后一行单元格索引值的数组

		var tr = document.getElementById('demo').getElementsByTagName('tr');

		var obj = tr[tr.length - 1].getElementsByTagName('td');

		for (var i in ar) {

			if (obj[ar[i]].style.display != 'none') obj[ar[i]].style.display = 'none';

			else obj[ar[i]].style.display = '';

		}

	}

}

</script>

</head>


<body>

<table width="500" border="1" id="demo">

  <tr>

    <td>0-0</td>

    <td>0-1</td>

    <td>0-2</td>

    <td>0-3</td>

    <td>0-4</td>

    <td>0-5</td>

  </tr>

  <tr>

    <td>1-0</td>

    <td>1-1</td>

    <td>1-2</td>

    <td>1-3</td>

    <td>1-4</td>

    <td>1-5</td>

  </tr>

  <tr>

    <td>2-0</td>

    <td>2-1</td>

    <td>2-2</td>

    <td>2-3</td>

    <td>2-4</td>

    <td>2-5</td>

  </tr>

</table>


<input type="button" id="btn" value="show/hide" />

</body>

</html>

秒客网

如何隐藏一个table中的某一行中的某几个元素

3 个解决方案

#1

#2

#3

#1

#2

#3

相关文章