remove useless files
This commit is contained in:
r0n1n7an
parent
71502d72b2
commit
57d949724c
@ -1,156 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>可编辑表格示例</title>
|
||||
<style>
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
th, td {
|
||||
border: 1px solid black;
|
||||
padding: 5px;
|
||||
}
|
||||
td[contenteditable="true"] {
|
||||
background-color: lightyellow;
|
||||
}
|
||||
.delete-button {
|
||||
background-color: red;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.delete-button:focus {
|
||||
outline: none;
|
||||
}
|
||||
#save-button, #add-row-button {
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table id="editable-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>姓名</th>
|
||||
<th>年龄</th>
|
||||
<th>城市</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td contenteditable="true">John</td>
|
||||
<td contenteditable="true">25</td>
|
||||
<td contenteditable="true">New York</td>
|
||||
<td><button class="delete-button" onclick="deleteRow(this)">删除</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td contenteditable="true">Jane</td>
|
||||
<td contenteditable="true">30</td>
|
||||
<td contenteditable="true">London</td>
|
||||
<td><button class="delete-button" onclick="deleteRow(this)">删除</button></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<button id="add-row-button">新增行</button>
|
||||
<button id="save-button">保存</button>
|
||||
|
||||
<script>
|
||||
const saveButton = document.getElementById('save-button');
|
||||
const addRowButton = document.getElementById('add-row-button');
|
||||
const table = document.getElementById('editable-table');
|
||||
|
||||
saveButton.addEventListener('click', () => {
|
||||
const data = collectDataFromTable();
|
||||
// 将数据传送到服务器端进行进一步处理或保存
|
||||
sendDataToServer(data);
|
||||
});
|
||||
|
||||
addRowButton.addEventListener('click', () => {
|
||||
const row = document.createElement('tr');
|
||||
|
||||
const nameCell = createEditableCell();
|
||||
const ageCell = createEditableCell();
|
||||
const cityCell = createCityCell();
|
||||
|
||||
row.appendChild(nameCell);
|
||||
row.appendChild(ageCell);
|
||||
row.appendChild(cityCell);
|
||||
|
||||
const deleteCell = document.createElement('td');
|
||||
const deleteButton = document.createElement('button');
|
||||
deleteButton.className = 'delete-button';
|
||||
deleteButton.textContent = '删除';
|
||||
deleteButton.addEventListener('click', () => {
|
||||
deleteRow(deleteButton);
|
||||
});
|
||||
deleteCell.appendChild(deleteButton);
|
||||
row.appendChild(deleteCell);
|
||||
|
||||
table.appendChild(row);
|
||||
});
|
||||
|
||||
function collectDataFromTable() {
|
||||
const data = [];
|
||||
const rows = table.getElementsByTagName('tr');
|
||||
|
||||
for (let i = 1; i < rows.length; i++) {
|
||||
const row = rows[i];
|
||||
const name = row.cells[0].innerText;
|
||||
const age = row.cells[1].innerText;
|
||||
const city = row.cells[2].querySelector('select').value;
|
||||
|
||||
data.push({ name, age, city });
|
||||
}
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
function sendDataToServer(data) {
|
||||
// 在这里使用 AJAX 或 Fetch API 等发送数据到服务器
|
||||
// 例如：使用 Fetch API 发送 POST 请求
|
||||
fetch('/10.60.230.109/save-data', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(data)
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(result => {
|
||||
console.log('数据已成功保存至服务器');
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('保存数据时出现错误:', error);
|
||||
});
|
||||
}
|
||||
|
||||
function createEditableCell() {
|
||||
const cell = document.createElement('td');
|
||||
cell.contentEditable = true;
|
||||
return cell;
|
||||
}
|
||||
|
||||
function createCityCell() {
|
||||
const cell = document.createElement('td');
|
||||
const select = document.createElement('select');
|
||||
const cities = ['New York', 'London', 'Tokyo', 'Paris'];
|
||||
|
||||
cities.forEach(city => {
|
||||
const option = document.createElement('option');
|
||||
option.textContent = city;
|
||||
select.appendChild(option);
|
||||
});
|
||||
|
||||
cell.appendChild(select);
|
||||
return cell;
|
||||
}
|
||||
|
||||
function deleteRow(button) {
|
||||
const row = button.closest('tr');
|
||||
row.parentNode.removeChild(row);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,58 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Tables</title>
|
||||
<style>
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
td, th {
|
||||
border: 1px solid grey;
|
||||
padding: 5px;
|
||||
}
|
||||
td[contenteditable="true"] {
|
||||
background-color: lightgrey;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body leftmargin="10px" >
|
||||
<h4>Model Maintainance</h4>
|
||||
<form name="tableUpdate" action="/tables/" method="POST" target="result">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Model</th>
|
||||
<th>Project Code</th>
|
||||
<th>Remark</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td contenteditable="true">John</td>
|
||||
<td contenteditable="true">25</td>
|
||||
<td contenteditable="true">
|
||||
<select>
|
||||
<option>New York</option>
|
||||
<option>London</option>
|
||||
<option>Tokyo</option>
|
||||
<option>Paris</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td contenteditable="true">Jane</td>
|
||||
<td contenteditable="true">30</td>
|
||||
<td contenteditable="true">
|
||||
<select>
|
||||
<option>New York</option>
|
||||
<option>London</option>
|
||||
<option>Tokyo</option>
|
||||
<option>Paris</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user