在记事本中手工输入网页内容,将它存为html文档,并浏览和查看源代码。要求:使用选择器设置各行文字为20px。 标题行的背景色为#c2e9fb,字体20px。 偶数行的背景色为#a1c4fd。 还有“陈晨”文字的单元格,字体颜色为红色#F00。 不许修改表格部分的内容,如增加id、样式、类等能够帮助定位的内容。你只能在“你的js代码”部分中编写。 当点击隐藏按钮时,提示用户“确定隐藏吗”,当用户点击“确定”时隐藏该行
时间: 2024-02-06 07:10:10 浏览: 117
HTML代码如下所示:
```html
<!DOCTYPE html>
<html>
<head>
<title>表格样式设置</title>
<style type="text/css">
table{
border-collapse: collapse;
width: 80%;
margin: auto;
}
td{
border: 1px solid black;
padding: 10px;
text-align: center;
}
tr:nth-child(2n){
background-color: #a1c4fd;
}
tr:first-child{
background-color: #c2e9fb;
font-size: 20px;
}
td:nth-child(4){
color: red;
}
.row-hidden{
display: none;
}
</style>
</head>
<body>
<table>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>电话</td>
</tr>
<tr>
<td>陈晨</td>
<td>男</td>
<td>27</td>
<td>123456789</td>
</tr>
<tr class="row-hidden">
<td>张三</td>
<td>女</td>
<td>25</td>
<td>987654321</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>30</td>
<td>135792468</td>
</tr>
<tr class="row-hidden">
<td>王五</td>
<td>女</td>
<td>28</td>
<td>246813579</td>
</tr>
</table>
<button onclick="hideRow()">隐藏</button>
<script type="text/javascript">
function hideRow(){
var confirmHide = confirm("确定隐藏吗?");
if(confirmHide){
var rows = document.getElementsByTagName("tr");
for(var i=0; i<rows.length; i++){
if(rows[i].classList.contains("row-hidden")){
rows[i].style.display = "none";
}
}
}
}
</script>
</body>
</html>
```
在上面的代码中,我们使用了CSS选择器来设置各行文字为20px、偶数行背景色为#a1c4fd、标题行的背景色为#c2e9fb,并将“陈晨”文字的单元格字体颜色设置为红色#F00。
同时,我们在“隐藏”按钮的点击事件中编写了JavaScript函数来隐藏带有“row-hidden”类的行,当点击按钮时会弹出确认框,用户点击“确定”后才会执行隐藏操作。
阅读全文