用html制作两个页面,第一个页面:为景点信息表格,里面用表格展示5个景点的名称 ,地址和描述;第二个页面:可以为第一个页面的表格的数据进行增加、删除、修改、全选功能。
时间: 2024-02-13 17:00:55 浏览: 23
好的,这是一个非常基础的 HTML 网页开发问题,我很乐意帮助你解答。
首先,我们需要创建两个 HTML 文件,一个是展示景点信息的页面,另一个是用于增删改查的页面。下面分别为你提供这两个页面的代码。
第一个页面(景点信息表格)的代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>景点信息表格</title>
</head>
<body>
<table border="1">
<tr>
<th>名称</th>
<th>地址</th>
<th>描述</th>
</tr>
<tr>
<td>景点1</td>
<td>地址1</td>
<td>描述1</td>
</tr>
<tr>
<td>景点2</td>
<td>地址2</td>
<td>描述2</td>
</tr>
<tr>
<td>景点3</td>
<td>地址3</td>
<td>描述3</td>
</tr>
<tr>
<td>景点4</td>
<td>地址4</td>
<td>描述4</td>
</tr>
<tr>
<td>景点5</td>
<td>地址5</td>
<td>描述5</td>
</tr>
</table>
</body>
</html>
```
第二个页面(增删改查)的代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>景点信息管理</title>
<script type="text/javascript">
function addRow() {
var table = document.getElementById("myTable");
var row = table.insertRow(-1);
var nameCell = row.insertCell(0);
var addressCell = row.insertCell(1);
var descriptionCell = row.insertCell(2);
nameCell.innerHTML = document.getElementById("name").value;
addressCell.innerHTML = document.getElementById("address").value;
descriptionCell.innerHTML = document.getElementById("description").value;
document.getElementById("name").value = "";
document.getElementById("address").value = "";
document.getElementById("description").value = "";
}
function deleteRow() {
var table = document.getElementById("myTable");
var rows = table.rows.length;
for (var i = rows - 1; i > 0; i--) {
var row = table.rows[i];
var chkbox = row.cells[3].childNodes[0];
if (chkbox.checked == true) {
table.deleteRow(i);
}
}
}
function editRow() {
var table = document.getElementById("myTable");
var rows = table.rows.length;
for (var i = rows - 1; i > 0; i--) {
var row = table.rows[i];
var chkbox = row.cells[3].childNodes[0];
if (chkbox.checked == true) {
document.getElementById("name").value = row.cells[0].innerHTML;
document.getElementById("address").value = row.cells[1].innerHTML;
document.getElementById("description").value = row.cells[2].innerHTML;
table.deleteRow(i);
}
}
}
function selectAll() {
var table = document.getElementById("myTable");
var rows = table.rows.length;
for (var i = 1; i < rows; i++) {
var row = table.rows[i];
var chkbox = row.cells[3].childNodes[0];
chkbox.checked = document.getElementById("checkall").checked;
}
}
</script>
</head>
<body>
<form>
<table border="1">
<tr>
<td>名称:</td>
<td><input type="text" id="name"></td>
</tr>
<tr>
<td>地址:</td>
<td><input type="text" id="address"></td>
</tr>
<tr>
<td>描述:</td>
<td><textarea id="description"></textarea></td>
</tr>
<tr>
<td colspan="2"><input type="button" value="添加" onclick="addRow()"> <input type="button" value="删除" onclick="deleteRow()"> <input type="button" value="修改" onclick="editRow()"> <input type="checkbox" id="checkall" onclick="selectAll()">全选</td>
</tr>
</table>
</form>
<br>
<table id="myTable" border="1">
<tr>
<th>名称</th>
<th>地址</th>
<th>描述</th>
<th>选择</th>
</tr>
<tr>
<td>景点1</td>
<td>地址1</td>
<td>描述1</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>景点2</td>
<td>地址2</td>
<td>描述2</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>景点3</td>
<td>地址3</td>
<td>描述3</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>景点4</td>
<td>地址4</td>
<td>描述4</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>景点5</td>
<td>地址5</td>
<td>描述5</td>
<td><input type="checkbox"></td>
</tr>
</table>
</body>
</html>
```
这两个页面的代码比较简单,第一个页面只是一个简单的表格,第二个页面则包含了增删改查的功能。在第二个页面中,我们使用了 JavaScript 来实现增删改查的功能,具体实现方法可以参考代码中的注释。
希望这可以帮助到你!