{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>数据表</title>
<style>
body {
background-image: url("{% static 'image/img.png' %}");
background-repeat: no-repeat;
background-size: cover;
font-family: 'Microsoft Yahei', sans-serif;
}
table {
border-collapse: collapse;
margin: 30px auto;
background-color: #fff;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
}
th, td {
padding: 10px;
text-align: center;
border: 1px solid #ccc;
}
th {
background-color: #f2f2f2;
}
input[type="text"] {
width: 80px;
padding: 5px;
margin: 5px;
border-radius: 5px;
border: none;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3) inset;
}
button {
padding: 5px 10px;
margin: 5px;
border-radius: 5px;
border: none;
background-color: #4CAF50;
color: #fff;
cursor: pointer;
}
</style>
</head>
<body>
<h1 contenteditable="true" style="text-align: center;">数据表</h1>
<table>
<caption contenteditable="true">标题</caption>
<thead>
<tr>
<th contenteditable="true">姓名</th>
<th contenteditable="true">年龄</th>
<th contenteditable="true">性别</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" id="name-1"></td>
<td><input type="text" id="age-1"></td>
<td><input type="text" id="gender-1"></td>
</tr>
<tr>
<td><input type="text" id="name-2"></td>
<td><input type="text" id="age-2"></td>
<td><input type="text" id="gender-2"></td>
</tr>
<tr>
<td><input type="text" id="name-3"></td>
<td><input type="text" id="age-3"></td>
<td><input type="text" id="gender-3"></td>
</tr>
<tr>
<td><input type="text" id="name-4"></td>
<td><input type="text" id="age-4"></td>
<td><input type="text" id="gender-4"></td>
</tr>
</tbody>
</table>
<div style="text-align: center;">
<button onclick="addRow()">添加行</button>
<button onclick="addCol()">添加列</button>
<button onclick="saveAsExel()">保存为Exel格式</button>
</div>
<script>
// 添加行
function addRow() {
var table = document.querySelector('table');
var lastRow = table.rows[table.rows.length - 1];
var newRow = lastRow.cloneNode(true);
var inputs = newRow.querySelectorAll('input');
for (var i = 0; i < inputs.length; i++) {
inputs[i].value = '';
inputs[i].id = inputs[i].id.slice(0, -1) + (table.rows.length - 1);
}
table.tBodies[0].appendChild(newRow);
}
// 添加列
function addCol() {
var table = document.querySelector('table');
var th = document.createElement('th');
var td = document.createElement('td');
th.innerHTML = '<h1 contenteditable="true">新列</h1>';
td.innerHTML = '<input type="text">';
table.tHead.rows[0].appendChild(th);
for (var i = 0; i < table.tBodies[0].rows.length; i++) {
table.tBodies[0].rows[i].appendChild(td.cloneNode(true));
}
}
// 保存为Exel格式
function saveAsExel() {
var table = document.querySelector('table');
var fileName = 'data.xls';
var content = '<table>';
content += '<thead>' + table.tHead.innerHTML + '</thead>';
content += '<tbody>' + table.tBodies[0].innerHTML + '</tbody>';
content += '</table>';
var blob = new Blob([content], {type: "application/vnd.ms-excel"});
if (window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveBlob(blob, fileName);
} else {
var link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = fileName;
link.click();
}
}
</script>
</body>
</html>
HTML+JavaScript 网页编辑表格(Exel+csv)文件并保存在本地
于 2024-01-03 15:39:45 首次发布