<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Maintenance</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
select, input[type="text"] {
width: 100%;
padding: 5px;
box-sizing: border-box;
}
button {
margin-top: 10px;
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #45a049;
}
.delete-button {
background-color: #f44336;
margin-left: 10px;
}
.delete-button:hover {
background-color: #e53935;
}
</style>
<script src="http://localhost/statist/jquery/jquery.js"></script>
</head>
<body>
<textarea type="text" id="copyTemp" style="height: 34px; width: 109px; display: none;"></textarea>
<h2>请求参数（表一）</h2>
<table id="table1">
<thead>
<tr>
<th>参数名</th>
<th>类型</th>
<th>是否必输</th>
<th>最大长度</th>
<th>描述</th>
<th>示例值</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tbody1">
<!-- 表格数据将在这里动态生成 -->
</tbody>
</table>
<button οnclick="addRow('table1')">添加行</button>
<button οnclick="saveTable('table1')">保存请求参数</button>
<button οnclick="generateMarkdown('table1')">生成Markdown请求参数</button>
<button οnclick="clearTable('table1')">清空请求参数</button>
<h2>响应参数（表二）</h2>
<table id="table2">
<thead>
<tr>
<th>参数名</th>
<th>类型</th>
<th>描述</th>
<th>示例值</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tbody2">
<!-- 表格数据将在这里动态生成 -->
</tbody>
</table>
<button οnclick="addRow('table2')">添加行</button>
<button οnclick="saveTable('table2')">保存响应参数</button>
<button οnclick="generateMarkdown('table2')">生成Markdown响应参数</button>
<button οnclick="clearTable('table2')">清空响应参数</button>
<script>
function addRow(tableId) {
const table = document.getElementById(tableId);
const tbody = table.tBodies[0]; // 获取tbody元素
const row = tbody.insertRow(-1);
var columns = ['参数名', '类型', '是否必输', '最大长度', '描述', '示例值'].slice(0, table.tHead.rows[0].cells.length);
if(tableId == "table2" ){
columns = ['参数名', '类型', '描述', '示例值'].slice(0, table.tHead.rows[0].cells.length);
}
columns.forEach((column, index) => {
const cell = row.insertCell(index);
if (column === '类型') {
const select = document.createElement('select');
const options = ['string', 'int', 'float', 'bool', 'object', 'array'];
options.forEach(option => {
const opt = document.createElement('option');
opt.value = option;
opt.text = option;
if (option === 'string') opt.selected = true;
select.appendChild(opt);
});
cell.appendChild(select);
} else if (column === '是否必输') {
const select = document.createElement('select');
const options = ['true', 'false'];
options.forEach(option => {
const opt = document.createElement('option');
opt.value = option;
opt.text = option;
if (option === 'true') opt.selected = true;
select.appendChild(opt);
});
cell.appendChild(select);
} else {
cell.innerHTML = `<input type="text" name="${column}" style="width: 100%; box-sizing: border-box;">`;
}
});
const deleteButton = document.createElement('button');
deleteButton.className = 'delete-button';
deleteButton.innerHTML = '删除';
deleteButton.onclick = function() {
table.deleteRow(row.rowIndex);
saveTable(tableId);
};
row.insertCell().appendChild(deleteButton);
}
function saveTable(tableId) {
const table = document.getElementById(tableId);
const data = [];
const rows = table.tBodies[0].rows;
for (let i = 0; i < rows.length; i++) {
const row = [];
const columns = rows[i].cells;
for (let j = 0; j < columns.length - 1; j++) {
const cell = columns[j];
if (cell.firstChild.tagName === 'SELECT') {
row.push(cell.firstChild.value);
} else {
row.push(cell.firstChild.value);
}
}
data.push(row);
}
localStorage.setItem(tableId, JSON.stringify(data));
}
function loadTable(tableId) {
const data = JSON.parse(localStorage.getItem(tableId)) || [];
const tbody = document.getElementById(`tbody${tableId.slice(-1)}`);
tbody.innerHTML = '';
data.forEach(row => {
const tr = document.createElement('tr');
row.forEach(cell => {
const td = document.createElement('td');
if (['类型', '是否必输'].includes(cell)) {
const select = document.createElement('select');
const options = ['string', 'int', 'float', 'bool', 'object', 'array'];
options.forEach(option => {
const opt = document.createElement('option');
opt.value = option;
opt.text = option;
if (option === cell) opt.selected = true;
select.appendChild(opt);
});
td.appendChild(select);
} else {
const input = document.createElement('input');
input.type = 'text';
input.value = cell;
td.appendChild(input);
}
tr.appendChild(td);
});
const deleteButton = document.createElement('button');
deleteButton.className = 'delete-button';
deleteButton.innerHTML = '删除';
deleteButton.onclick = function() {
tbody.removeChild(tr);
saveTable(tableId);
};
const td = document.createElement('td');
tr.appendChild(td);
td.appendChild(deleteButton);
tbody.appendChild(tr);
});
}
function generateMarkdown(tableId) {
const table = document.getElementById(tableId);
const data = [];
const headers = [];
const rows = table.tBodies[0].rows;
for (let i = 0; i < rows.length; i++) {
const row = [];
const columns = rows[i].cells;
for (let j = 0; j < columns.length-1; j++) {
row.push(columns[j].firstChild.value);
}
data.push(row);
headers.push(row);
}
const header = headers.shift();
var markdown = "| 参数名 | 类型 | 是否必输 | 最大长度 | 描述 | 示例值 |\n";
if(tableId == "table2"){
markdown = "| 参数名 | 类型 | 描述 | 示例值 |\n";
}
var thead = `| ${header.map(() => '---').join(' | ')} |\n`;
markdown = markdown+thead;
data.forEach(row => {
markdown += `| ${row.join(' | ')} |\n`;
});;
markdown = markdown.trim(); // 移除末尾的换行符
console.log(markdown);
$("#copyTemp").val(markdown);
var ele = $("#copyTemp");
ele.select();
document.execCommand('copy', false, null);
}
function clearTable(tableId) {
localStorage.removeItem(tableId);
loadTable(tableId);
}
// 加载表格数据
loadTable('table1');
loadTable('table2');
</script>
</body>
</html>
扫一扫
9523
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
