溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“怎么用jQuery創建彩色條紋表格效果”，在日常操作中，相信很多人在怎么用jQuery創建彩色條紋表格效果問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么用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;
}
h2 {
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>
<h2>
億速云
</h2>
<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是使用的類名，odd表示奇數行將具有彩色條紋。
如果要更改偶數行條紋，只需使用：
$(function() {
$("table tr:nth-child(even)").addClass("zebrastripe");
})注：
nth-child(n) 選擇器選取屬于其父元素的不限類型的第 n 個子元素的所有元素。
addClass() 方法向被選元素添加一個或多個類，該方法不會移除已存在的 class 屬性，僅僅添加一個或多個 class 屬性。
到此，關于“怎么用jQuery創建彩色條紋表格效果”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
