html文本框容纳行数和列数,我想创建HTML页面,需要通过按行数和列数输入来显示表格行和列...

这里你去:

td{min-width:100px;min-height:20px;border:solid 1px #000;}

window.onload = function() {

document.getElementById('btnCreate').addEventListener('click', function(){

var rows = parseInt(document.getElementById('txtRows').value),

cols = parseInt(document.getElementById('txtCols').value);

create(rows,cols);

});

}

function create(rows, cols) {

if (rows <= 0 || cols <= 0)

return false;

var html = '

for (i=0;i

html += '

';

for (j=0;j

html += '

 ';

}

html += '

';

}

html += '

';

document.getElementsByTagName('body')[0].innerHTML = html;

}

rows:

cols:

希望有所帮助。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我理解了你的问题。对于这个需求,通常可以使用 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); }); ``` 希望这个示例能够帮助你解决问题。如果还有其他疑问或需要了解更多信息,请随时向我提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值