87,993
社区成员
发帖
与我相关
我的任务
分享求个大佬来教一下，都是一些简单的东西
页面中的HTML代码如下：
<table width="383" height="257" border="1" align="center">
<tr>
<td width="121"><div align="center">学号</div></td>
<td width="171"><div align="center">姓名</div></td>
<td width="139"><div align="center">专业</div></td>
</tr>
<tr>
<td><div align="center">01dd0101</div></td>
<td><div align="center">小陈</div></td>
<td><div align="center">小学教育</div></td>
</tr>
<tr>
<td><div align="center">01d0505</div></td>
<td><div align="center">小王</div></td>
<td><div align="center">计算机</div></td>
</tr>
<tr>
<td><div align="center">01d0205</div></td>
<td><div align="center">小刘</div></td>
<td><div align="center">高数</div></td>
</tr>
</table>
应用jQuery技术，实现表格的隔行变色，即表格中奇数行是一种颜色，偶数行是一种颜色
求个大佬，有代码那种
...全文
请发表友善的回复…
发表回复
恰好动心了 2019-06-11
- 打赏
- 举报
所以这个软件咋给分啊
路人王昂三 2019-06-11
- 打赏
- 举报
灰色的是CSS部分,你可以自己选择用CSS去隔行变色还是jquery
恰好动心了 2019-06-10
- 打赏
- 举报
大佬能不能直接把全部代码发出来侮辱我
[/quote]
上面jquery写错了,以下是可实现代码,style里面也可以直接用样式,改下自己的jquery引用路径,给分吧.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- <style>
tr:nth-of-type(even){
background-color: pink;
}
</style> -->
<script src="./jquery.min.js"></script>
<script>
$(function(){
$('table tr:odd').css('background', 'pink')
})
</script>
</head>
<body>
<table width="383" height="257" border="1" align="center">
<tr>
<td width="121"><div align="center">学号</div></td>
<td width="171"><div align="center">姓名</div></td>
<td width="139"><div align="center">专业</div></td>
</tr>
<tr>
<td><div align="center">01dd0101</div></td>
<td><div align="center">小陈</div></td>
<td><div align="center">小学教育</div></td>
</tr>
<tr>
<td><div align="center">01d0505</div></td>
<td><div align="center">小王</div></td>
<td><div align="center">计算机</div></td>
</tr>
<tr>
<td><div align="center">01d0205</div></td>
<td><div align="center">小刘</div></td>
<td><div align="center">高数</div></td>
</tr>
</table>
</body>
</html>
[/quote]
顺便一问，咋给分啊
[/quote]
上面jquery写错了,以下是可实现代码,style里面也可以直接用样式,改下自己的jquery引用路径,给分吧.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- <style>
tr:nth-of-type(even){
background-color: pink;
}
</style> -->
<script src="./jquery.min.js"></script>
<script>
$(function(){
$('table tr:odd').css('background', 'pink')
})
</script>
</head>
<body>
<table width="383" height="257" border="1" align="center">
<tr>
<td width="121"><div align="center">学号</div></td>
<td width="171"><div align="center">姓名</div></td>
<td width="139"><div align="center">专业</div></td>
</tr>
<tr>
<td><div align="center">01dd0101</div></td>
<td><div align="center">小陈</div></td>
<td><div align="center">小学教育</div></td>
</tr>
<tr>
<td><div align="center">01d0505</div></td>
<td><div align="center">小王</div></td>
<td><div align="center">计算机</div></td>
</tr>
<tr>
<td><div align="center">01d0205</div></td>
<td><div align="center">小刘</div></td>
<td><div align="center">高数</div></td>
</tr>
</table>
</body>
</html>
[/quote]
顺便一问，咋给分啊恰好动心了 2019-06-10
- 打赏
- 举报
那个大佬！为什么这部分是灰的啊！ <!-- <style>
tr:nth-of-type(even){
background-color: pink;
}
</style> -->
路人王昂三 2019-06-10
- 打赏
- 举报
大佬能不能直接把全部代码发出来侮辱我[/quote]
上面jquery写错了,以下是可实现代码,style里面也可以直接用样式,改下自己的jquery引用路径,给分吧.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- <style>
tr:nth-of-type(even){
background-color: pink;
}
</style> -->
<script src="./jquery.min.js"></script>
<script>
$(function(){
$('table tr:odd').css('background', 'pink')
})
</script>
</head>
<body>
<table width="383" height="257" border="1" align="center">
<tr>
<td width="121"><div align="center">学号</div></td>
<td width="171"><div align="center">姓名</div></td>
<td width="139"><div align="center">专业</div></td>
</tr>
<tr>
<td><div align="center">01dd0101</div></td>
<td><div align="center">小陈</div></td>
<td><div align="center">小学教育</div></td>
</tr>
<tr>
<td><div align="center">01d0505</div></td>
<td><div align="center">小王</div></td>
<td><div align="center">计算机</div></td>
</tr>
<tr>
<td><div align="center">01d0205</div></td>
<td><div align="center">小刘</div></td>
<td><div align="center">高数</div></td>
</tr>
</table>
</body>
</html>
[/quote]
上面jquery写错了,以下是可实现代码,style里面也可以直接用样式,改下自己的jquery引用路径,给分吧.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- <style>
tr:nth-of-type(even){
background-color: pink;
}
</style> -->
<script src="./jquery.min.js"></script>
<script>
$(function(){
$('table tr:odd').css('background', 'pink')
})
</script>
</head>
<body>
<table width="383" height="257" border="1" align="center">
<tr>
<td width="121"><div align="center">学号</div></td>
<td width="171"><div align="center">姓名</div></td>
<td width="139"><div align="center">专业</div></td>
</tr>
<tr>
<td><div align="center">01dd0101</div></td>
<td><div align="center">小陈</div></td>
<td><div align="center">小学教育</div></td>
</tr>
<tr>
<td><div align="center">01d0505</div></td>
<td><div align="center">小王</div></td>
<td><div align="center">计算机</div></td>
</tr>
<tr>
<td><div align="center">01d0205</div></td>
<td><div align="center">小刘</div></td>
<td><div align="center">高数</div></td>
</tr>
</table>
</body>
</html>
恰好动心了 2019-06-10
- 打赏
- 举报
大佬能不能直接把全部代码发出来侮辱我
路人王昂三 2019-06-10
- 打赏
- 举报
jquery
$('tr:eq(odd)').css('backgroundColor': red)
css也可以控制隔行变色
tr:nth-of-type(odd){
background-color: red;
}
