在html文本框中输入表格的行数、列数、宽度、高度,点击创建按钮触发事件获取html中表格的行数、列数、宽度、高度,传值给函数创建表格
时间: 2023-12-27 14:03:10 浏览: 73
VB 获得文本框中文字的行数,并返回某一行的内容.rar
好的,我理解了你的问题。对于这个需求,通常可以使用 JavaScript 来实现。具体的实现步骤如下:
1. 首先,在 HTML 页面上创建一个文本框用于输入需要创建的表格的行数、列数、宽度、高度,并添加一个按钮用于触发创建事件。
2. 在 JavaScript 中,获取这些输入框的值,并转换为需要的类型(如将行数和列数转为数字类型)。
3. 接下来,使用 document.createElement() 方法创建一个新的表格元素,并使用循环创建表格的行和列。
4. 对于每一个单元格,设置宽度和高度,并将其添加到对应的行和列中。
5. 最后,将新创建的表格添加到页面中。
下面是一个基本的示例代码:
HTML:
```
<label>行数:<input id="rowNum" type="text"></label>
<label>列数:<input id="colNum" type="text"></label>
<label>宽度:<input id="width" type="text"></label>
<label>高度:<input id="height" type="text"></label>
<button id="createTable">创建表格</button>
<div id="tableContainer"></div>
```
JavaScript:
```
// 获取输入框和按钮元素
var rowNumInput = document.getElementById('rowNum');
var colNumInput = document.getElementById('colNum');
var widthInput = document.getElementById('width');
var heightInput = document.getElementById('height');
var createButton = document.getElementById('createTable');
var tableContainer = document.getElementById('tableContainer');
// 绑定创建事件
createButton.addEventListener('click', function() {
// 获取所需参数
var rowNum = parseInt(rowNumInput.value, 10);
var colNum = parseInt(colNumInput.value, 10);
var width = widthInput.value;
var height = heightInput.value;
// 创建表格
var table = document.createElement('table');
for (var i = 0; i < rowNum; i++) {
var row = document.createElement('tr');
for (var j = 0; j < colNum; j++) {
var cell = document.createElement('td');
cell.style.width = width + 'px';
cell.style.height = height + 'px';
row.appendChild(cell);
}
table.appendChild(row);
}
// 显示表格
tableContainer.appendChild(table);
});
```
希望这个示例能够帮助你解决问题。如果还有其他疑问或需要了解更多信息,请随时向我提问。
阅读全文