이전 글에서 "레이블을 사용하지 않고 테이블을 만드는 방법에 도전하시나요? 》태그를 사용하지 않고 테이블을 만드는 방법을 소개합니다. 필요한 친구는 더 배울 수 있습니다~
이 기사의 주요 내용은 jQuery를 사용하여 다채로운 줄무늬 테이블 효과를 만드는 방법을 가르치는 것입니다.
같은 테이블 스타일에 질리실 수도 있습니다. 오늘은 컬러 스트라이프로 테이블 효과를 만드는 방법을 소개하겠습니다. 필요하다면 이 글을 놓치지 마세요~
아래 코드를 직접 살펴보겠습니다.
<html>
<head>
<meta charset="UTF-8">
<title>jquery实现彩色条纹表格</title>
<script type="text/javascript" src=
"https://code.jquery.com/jquery-3.5.1.js">
</script>
<script type="text/javascript">
$(function() {
$("table tr:nth-child(odd)")
.addClass("zebrastripe");
});
</script>
<style type="text/css">
body,
td {
font-size: 10pt;
text-align: center;
}
h1 {
color: green;
}
table {
background-color: black;
border: 1px black solid;
border-collapse: collapse;
}
th {
font-size: 15px;
padding: 5px 8px;
border: 1px outset silver;
background-color: rgb(197, 69, 69);
color: white;
}
tr {
border: 1px outset silver;
padding: 5px 8px;
background-color: white;
margin: 1px;
}
tr.zebrastripe {
background-color: green;
}
td {
border: 0.5px outset silver;
border-collapse: collapse;
padding: 5px 8px;
}
.center {
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<h1>
PHP中文网
</h1>
<table class="center">
<tr>
<th>ID</th>
<th>姓名</th>
<th>分数</th>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>112</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>109</td>
</tr>
<tr>
<td>3</td>
<td>王二</td>
<td>123</td>
</tr>
<tr>
<td>5</td>
<td>赵五</td>
<td>108</td>
</tr>
<tr>
<td>6</td>
<td>周六</td>
<td>122</td>
</tr>
</table>
</body>
</html>효과는 다음과 같습니다.
$(function() {
$("table tr:nth-child(odd)").addClass("zebrastripe");
});여기 함수에서 zebrastripe는 사용된 클래스 이름이고 홀수는 홀수 행이 색깔있는 줄무늬가 있어요. 행 줄무늬를 변경하려면 다음을 사용하세요. $(function() {
$("table tr:nth-child(even)").addClass("zebrastripe");
})
참고:
nth-child(n) 선택기는 상위 요소에 속하는 모든 유형의 n번째 하위 항목을 선택합니다. 요소의 요소. nth-child(n) 选择器选取属于其父元素的不限类型的第 n 个子元素的所有元素。
addClass()addClass() 메서드는 선택한 요소에 하나 이상의 클래스를 추가합니다. 이 메서드는 기존 클래스 속성을 제거하지 않고 하나 이상의 클래스 속성만 추가합니다.
PHP 중국어 웹사이트 플랫폼에는 많은 동영상 교육 자료가 있습니다. 누구나 "jquery 동영상 튜토리얼"과 "javascript 기본 튜토리얼"을 배울 수 있습니다!
위 내용은 jQuery를 사용하여 다채로운 줄무늬 테이블 효과를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!