要求用Jquery实现 ,点击创建按钮触发事件获取表格的行数、列数、宽度、高度,传值给函数创建表格
时间: 2024-05-07 17:16:42 浏览: 13
好的,可以的。关于您的要求,我理解并记录下来了。关于您的第一个问题,可以使用以下代码实现:
```javascript
$('button').click(function() {
var rows = $('input[name=rows]').val(); // 获取行数的值
var cols = $('input[name=cols]').val(); // 获取列数的值
var width = $('input[name=width]').val(); // 获取表格宽度的值
var height = $('input[name=height]').val(); // 获取表格高度的值
// 调用创建表格的函数,并将行数、列数、宽度、高度作为参数传递
createTable(rows, cols, width, height);
});
function createTable(rows, cols, width, height) {
// 创建table元素以及相关的DOM元素
var table = $('<table>').appendTo('body');
var tbody = $('<tbody>').appendTo(table);
// 循环创建单元格并添加到表格
for (var i = 0; i < rows; i++) {
var tr = $('<tr>').appendTo(tbody);
for (var j = 0; j < cols; j++) {
var td = $('<td>').appendTo(tr);
td.css({ width: width + 'px', height: height + 'px' }); // 设置单元格的宽度和高度
}
}
}
```
以上代码是基于 JQuery 实现的,通过点击按钮触发事件,获取表格的行数、列数、宽度和高度,并将这些参数传递给 `createTable()` 函数来创建表格。实现过程中还需要使用 JQuery 对 DOM 元素进行操作,这样就可以动态地生成表格。