code CSS pour réaliser l'échange mutuel des lignes et des colonnes du tableau-tutoriel CSS-php.cn

code CSS pour réaliser l'échange mutuel des lignes et des colonnes du tableau

不言

Libérer： 2018-08-10 11:46:50

original

2176 Les gens l'ont consulté

Cet article vous présente le code CSS pour réaliser l'échange de lignes et de colonnes de tableaux. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

<!DOCTYPE html>
<html>

	<head>
		<title>行列互换</title>
		<meta charset="UTF-8">
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<style type="text/css">
			table {
				border: 1px solid #ccc;
				font-size: 14px;
			}
			
			table th {
				background: orange;
				color: #fff;
				padding: 10px;
			}
			
			table td {
				padding: 10px;
			}
			
			table.vertical {
				-webkit-writing-mode: vertical-lr;
				-moz-writing-mode: vertical-lr;
				-ms-writing-mode: tb-lr;
				writing-mode: vertical-lr;
			}
			
			table.vertical th,
			table.vertical td {
				width: 100px;
				height: 14px;
			}
			
			table.vertical p {
				-webkit-writing-mode: horizontal-tb;
				-moz-writing-mode: horizontal-tb;
				-ms-writing-mode: lr-tb;
				writing-mode: horizontal-tb;
			}
		</style>
		<script type="text/javascript">
			var flag = false;
			//注：多次点击后，内面文字会包裹多层p，尚无好的解决方法
			function test() {
				if(!flag) {
					$(&#39;table&#39;).addClass(&#39;vertical&#39;).find(&#39;th, td&#39;).wrapInner(&#39;<p>&#39;);
//					$(&#39;table&#39;).addClass(&#39;vertical&#39;);//数字会变垂直，不能用
				} else {
					$(&#39;table&#39;).removeClass(&#39;vertical&#39;);
				}
				flag = !flag;
			}
		</script>
	</head>

	<body>
		<table>
			<tr>
			<tr>
				<th>列1</th>
				<th>列2</th>
				<th>列3</th>
				<th>列4</th>
			</tr>
			<tr>
				<td>数据1-1</td>
				<td>数据1-2</td>
				<td>数据1-3</td>
				<td>数据1-4</td>
			</tr>
			<tr>
				<td>数据2-1</td>
				<td>数据2-2</td>
				<td>数据2-3</td>
				<td>数据2-4</td>
			</tr>
			<tr>
				<td>数据3-1</td>
				<td>数据3-2</td>
				<td>数据3-3</td>
				<td>数据3-4</td>
			</tr>
			<tr>
				<td>数据1-1</td>
				<td>数据1-2</td>
				<td>数据1-3</td>
				<td>数据1-4</td>
			</tr>
			<tr>
				<td>数据2-1</td>
				<td>数据2-2</td>
				<td>数据2-3</td>
				<td>数据2-4</td>
			</tr>
			<tr>
				<td>数据3-1</td>
				<td>数据3-2</td>
				<td>数据3-3</td>
				<td>数据3-4</td>
			</tr>
			<tr>
				<td>数据1-1</td>
				<td>数据1-2</td>
				<td>数据1-3</td>
				<td>数据1-4</td>
			</tr>
			<tr>
				<td>数据2-1</td>
				<td>数据2-2</td>
				<td>数据2-3</td>
				<td>数据2-4</td>
			</tr>
			<tr>
				<td>数据3-1</td>
				<td>数据3-2</td>
				<td>数据3-3</td>
				<td>数据3-4</td>
			</tr>
			<tr>
				<td>数据1-1</td>
				<td>数据1-2</td>
				<td>数据1-3</td>
				<td>数据1-4</td>
			</tr>
			<tr>
				<td>数据2-1</td>
				<td>数据2-2</td>
				<td>数据2-3</td>
				<td>数据2-4</td>
			</tr>
			<tr>
				<td>数据3-1</td>
				<td>数据3-2</td>
				<td>数据3-3</td>
				<td>数据3-4</td>
			</tr>
			<tr>
				<td>数据1-1</td>
				<td>数据1-2</td>
				<td>数据1-3</td>
				<td>数据1-4</td>
			</tr>
			<tr>
				<td>数据2-1</td>
				<td>数据2-2</td>
				<td>数据2-3</td>
				<td>数据2-4</td>
			</tr>
			<tr>
				<td>数据3-1</td>
				<td>数据3-2</td>
				<td>数据3-3</td>
				<td>数据3-4</td>
			</tr>
			<tr>
				<td>数据1-1</td>
				<td>数据1-2</td>
				<td>数据1-3</td>
				<td>数据1-4</td>
			</tr>
			<tr>
				<td>数据2-1</td>
				<td>数据2-2</td>
				<td>数据2-3</td>
				<td>数据2-4</td>
			</tr>
			<tr>
				<td>数据3-1</td>
				<td>数据3-2</td>
				<td>数据3-3</td>
				<td>数据3-4</td>
			</tr>
			<tr>
				<td>数据1-1</td>
				<td>数据1-2</td>
				<td>数据1-3</td>
				<td>数据1-4</td>
			</tr>
			<tr>
				<td>数据2-1</td>
				<td>数据2-2</td>
				<td>数据2-3</td>
				<td>数据2-4</td>
			</tr>
			<tr>
				<td>数据3-1</td>
				<td>数据3-2</td>
				<td>数据3-3</td>
				<td>数据3-4</td>
			</tr>
			<tr>
				<td>数据1-1</td>
				<td>数据1-2</td>
				<td>数据1-3</td>
				<td>数据1-4</td>
			</tr>
			<tr>
				<td>数据2-1</td>
				<td>数据2-2</td>
				<td>数据2-3</td>
				<td>数据2-4</td>
			</tr>
			<tr>
				<td>数据3-1</td>
				<td>数据3-2</td>
				<td>数据3-3</td>
				<td>数据3-4</td>
			</tr>
		</table>
		<input type="button" onclick="test()" value="行列转置" />
	</body>

</html>

Copier après la connexion

Recommandations associées :

L'attribut d'animation en CSS3 implémente le code pour que la flèche défile vers la droite et disparaisse

Problèmes de positionnement en CSS : Positionnement absolu, positionnement relatif, fixe et statique

Comment utiliser le CSS pour recouvrir une autre image lorsque la souris entre et sort ? (Exemple)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!