我创建了一个div表,当你将鼠标悬停在它们上面时会变成红色。
var createGrid = function(width, height){
for (var i = 16; i <= height+15; i++)
{
$('<tr></tr>', {
'id' : 'tr' + i
}).appendTo($('#one'));
for (var j = 16; j <= width+15; j++) {
$('<td></td>', {
'id' : 'td' + i + j
}).appendTo($('#tr' + i));
$('#td' + i + j).wrapInner('<div class="div" />');
};
$('div').css({
'border' : '1px solid black',
'height' : '20px',
'width' : '20px'
});
}; };
我还可以询问用户点击按钮时表格的宽度/高度。
$(this).on('click', '#reset', function() {
$('tbody').remove();
var w = +prompt("width?");
var h = +prompt("height?");
createGrid(w, h); });
但是,当有更多单元格时,表格会变大。如何使表格大小固定,但是当单元格较少时使单元格更大,当单元格更多时单元格更小?
答案 0 :(得分:0)
使用css设置
table{
width:"500"
}
您已经定义了单元格的宽度
$('div').css({
'border' : '1px solid black',
'height' : '20px',
'width' : '20px'
});
尝试使用10%或其他百分比来替换数字