使用JavaScript生成可编辑能够插入图片的网页表格怎么调整表格大小
时间: 2024-03-24 07:41:17 浏览: 20
要调整表格的大小,可以通过修改表格的CSS样式来实现。可以使用JavaScript获取表格对象,然后修改其width和height属性值来调整表格的大小。
下面是一个使用JavaScript生成表格,并可以调整表格大小的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>可编辑的表格</title>
<style>
table {
border-collapse: collapse;
border: 1px solid #ccc;
margin: 20px;
}
td, th {
border: 1px solid #ccc;
padding: 10px;
}
</style>
</head>
<body>
<h2>可编辑的表格</h2>
<div>
<button onclick="addRow()">添加行</button>
<button onclick="addColumn()">添加列</button>
<button onclick="deleteRow()">删除行</button>
<button onclick="deleteColumn()">删除列</button>
<button onclick="changeSize()">调整大小</button>
</div>
<table id="myTable">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td contenteditable="true">张三</td>
<td contenteditable="true">18</td>
<td contenteditable="true">男</td>
</tr>
<tr>
<td contenteditable="true">李四</td>
<td contenteditable="true">20</td>
<td contenteditable="true">女</td>
</tr>
</table>
<script>
var table = document.getElementById("myTable");
function addRow() {
var newRow = table.insertRow();
var cellsCount = table.rows[0].cells.length;
for (var i = 0; i < cellsCount; i++) {
var newCell = newRow.insertCell();
newCell.contentEditable = true;
newCell.innerHTML = "新单元格";
}
}
function addColumn() {
var cellsCount = table.rows[0].cells.length;
for (var i = 0; i < table.rows.length; i++) {
var newCell = table.rows[i].insertCell();
newCell.contentEditable = true;
newCell.innerHTML = "新单元格";
}
}
function deleteRow() {
if (table.rows.length > 2) {
table.deleteRow(table.rows.length - 1);
}
}
function deleteColumn() {
if (table.rows[0].cells.length > 1) {
for (var i = 0; i < table.rows.length; i++) {
table.rows[i].deleteCell(table.rows[i].cells.length - 1);
}
}
}
function changeSize() {
table.style.width = "50%";
table.style.height = "200px";
}
</script>
</body>
</html>
```
在示例代码中,通过调用changeSize()函数来改变表格的大小。该函数中使用了table.style.width和table.style.height来修改表格的CSS样式。可以根据实际需求修改这些属性值来调整表格的大小。