Question

我有一张桌子（决定抛出我之前提出的所有问题并让它绘制一张普通的老桌子），只需点击一个调用javascript函数的按钮就可以在页面上重新调整大小

表格可能很小，也可能很大 - 比页面大得多。

我需要一个按钮，在点击时会将表格重新调整为可见窗口的大小。另一个按钮可以将桌子的大小放回原来的大小。

这就是表格的制作方式：

<table  id=resizableTable cellpadding='5' cellspacing='0' border='0' width: '75%'  leftmargin='50' >

如何获得可见窗口区域：

var visHeight = window.innerHeight;
var visWidth = window.innerWidth;

我在javascript中尝试了以下内容：

1）

document.getElementById('resizableTable').max-width = visWidth + 'px'; 
document.getElementById('resizableTable').max-height = visHeight + 'px';

2）

document.getElementById('resizableTable').style.width = visWidth + 'px';
document.getElementById('resizableTable').style.height = visHeight + 'px';

3）

jQuery('#resizableTable').css('width',visWidth + 'px');
jQuery('#resizableTable').css('height',visHeight + 'px');

但这些都不起作用 - 实际上，表格根本没有变化！我究竟做错了什么？我甚至无法将表格调整到原来的大小，因为我已经陷入了这一部分。

Answer 1

将宽度和高度设置为百分比。例如：

var b = true;
document.getElementById('button').onclick = function() {
    if (b = true) {
    document.getElementById('resizableTable').style.width = '100%';
    document.getElementById('resizableTable').style.height = '100%';
    } else {
    document.getElementById('resizableTable').style.width = '1080px';
    document.getElementById('resizableTable').style.width = '720px';
}}

Answer 2

这是 FIDDLE

<button class="on">Full</button>
<button class="off">Normal</button>

<table id="resizableTable">
  <tr>
    <th>Header</th>
    <th>Header</th>
    <th>Header</th>
    <th>Header</th>
    <th>Header</th>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>

  ...more data...

</table>

table {
  width: 70%;
  padding: 0;
  margin: 0 auto;
  text-align: center;
}

$(function() {
  $('.on').click(function() {
    $('#resizableTable').css({ 
        width: $(window).innerWidth() + 'px', 
        height: $(window).innerHeight() + 'px'
    });
  });
  $('.off').click(function() {
    $('#resizableTable').css({ 
        width: '70%', 
        height: 'auto'
    });
  });
});

如何使用按钮（javascript）制作可以调整到可见窗口大小的HTML表格？

2 个答案: