98 lines
2.1 KiB
HTML
98 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>可编辑表格示例</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
padding: 20px;
|
|
}
|
|
table {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
table-layout: fixed;
|
|
}
|
|
th, td {
|
|
border: 1px solid #ccc;
|
|
padding: 5px;
|
|
text-align: center;
|
|
}
|
|
input[type="text"], input[type="date"] {
|
|
width: 90%;
|
|
box-sizing: border-box;
|
|
}
|
|
input[type="checkbox"] {
|
|
transform: scale(1.2);
|
|
}
|
|
button {
|
|
margin-top: 10px;
|
|
padding: 5px 10px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<h2>可编辑表格示例</h2>
|
|
|
|
<table id="editableTable">
|
|
<thead>
|
|
<tr>
|
|
<!-- 生成 20 个列标题 -->
|
|
<script>
|
|
for(let i=1; i<=20; i++){
|
|
document.write(`<th>列${i}</th>`);
|
|
}
|
|
</script>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<!-- 初始 20 行 -->
|
|
<script>
|
|
function createRow(rowIndex){
|
|
let row = '<tr>';
|
|
for(let i=1;i<=20;i++){
|
|
if(i % 3 === 1){ // 文本输入
|
|
row += `<td><input type="text" placeholder="文本${rowIndex}-${i}"></td>`;
|
|
} else if(i % 3 === 2){ // 日期选择
|
|
row += `<td><input type="date"></td>`;
|
|
} else { // 复选框
|
|
row += `<td><input type="checkbox"></td>`;
|
|
}
|
|
}
|
|
row += '</tr>';
|
|
return row;
|
|
}
|
|
|
|
for(let r=1;r<=20;r++){
|
|
document.write(createRow(r));
|
|
}
|
|
</script>
|
|
</tbody>
|
|
</table>
|
|
|
|
<button onclick="addRow()">新增行</button>
|
|
|
|
<script>
|
|
function addRow(){
|
|
const tbody = document.querySelector('#editableTable tbody');
|
|
const rowCount = tbody.rows.length + 1;
|
|
let newRow = '<tr>';
|
|
for(let i=1;i<=20;i++){
|
|
if(i % 3 === 1){
|
|
newRow += `<td><input type="text" placeholder="文本${rowCount}-${i}"></td>`;
|
|
} else if(i % 3 === 2){
|
|
newRow += `<td><input type="date"></td>`;
|
|
} else {
|
|
newRow += `<td><input type="checkbox"></td>`;
|
|
}
|
|
}
|
|
newRow += '</tr>';
|
|
tbody.insertAdjacentHTML('beforeend', newRow);
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|