1散怖、HTML模擬Excel表格
image.png
2、上代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Excel-like Table</title>
<style>
table {
border-collapse: collapse;
table-layout: fixed;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 5px;
text-align: center;
}
.addRow, .addColumn, .deleteRow, .deleteColumn {
margin-bottom: 10px;
}
button {
padding: 5px 10px;
}
</style>
</head>
<body>
<div>
<button class="addRow" onclick="addRow()">添加行</button>
<button class="addColumn" onclick="addColumn()">添加列</button>
<button class="deleteRow" onclick="deleteRow()">刪除行</button>
<button class="deleteColumn" onclick="deleteColumn()">刪除列</button>
<button class="saveData" onclick="saveData()">保存數(shù)據(jù)</button>
</div>
<table id="excelTable">
<thead>
<tr>
<th contenteditable="true"></th>
<th contenteditable="true">A</th>
<th contenteditable="true">B</th>
<th contenteditable="true">C</th>
<th contenteditable="true">D</th>
</tr>
</thead>
<tbody>
<tr>
<th contenteditable="true">1</th>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
</tr>
<tr>
<th contenteditable="true">2</th>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
</tr>
<tr>
<th contenteditable="true">3</th>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
</tr>
<tr>
<th contenteditable="true">4</th>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function addRow() {
var table = document.getElementById("excelTable");
var row = table.insertRow(-1);
var rowIndex = table.rows.length - 2;
var cell0 = row.insertCell(0);
cell0.innerHTML = rowIndex;
cell0.contentEditable = true;
for (var i = 1; i < table.rows[1].cells.length; i++) {
var cell = row.insertCell(i);
cell.contentEditable = true;
}
}
function addColumn() {
var table = document.getElementById("excelTable");
for (var i = 0; i < table.rows.length; i++) {
var cell = table.rows[i].insertCell(-1);
cell.contentEditable = true;
if (i === 0) {
var columnIndex = table.rows[i].cells.length - 2;
cell.innerHTML = String.fromCharCode(65 + columnIndex);
cell.contentEditable = true;
}
}
}
function deleteRow() {
var table = document.getElementById("excelTable");
if (table.rows.length > 2) {
table.deleteRow(-1);
}
}
function deleteColumn() {
var table = document.getElementById("excelTable");
if (table.rows[0].cells.length > 2) {
for (var i = 0; i < table.rows.length; i++) {
table.rows[i].deleteCell(-1);
}
}
}
function saveData() {
var tableData = [];
var table = document.getElementById("excelTable");
var tableHeaders = [];
for (var i = 0; i < table.rows[0].cells.length; i++) {
tableHeaders.push(table.rows[0].cells[i].innerHTML);
}
tableData.push(tableHeaders);
for (var i = 1; i < table.rows.length; i++) {
var rowData = [];
for (var j = 0; j < table.rows[i].cells.length; j++) {
rowData.push(table.rows[i].cells[j].innerHTML);
}
tableData.push(rowData);
}
console.log("tableData：",tableData)
console.log("json：",JSON.stringify(tableData))
/*$.ajax({
url: "test5.php",
type: "POST",
data: { tableData: JSON.stringify(tableData) },
success: function(response) {
alert("Data saved successfully!");
}
});*/
}
</script>
</body>
</html>
