Как сделать HTML таблицу, которая может быть изменена до видимого окна с помощью кнопки (JavaScript)?

0

У меня есть таблица (решил выбросить все из моего предыдущего вопроса и нарисовать простой старую таблицу), которая должна быть переделана на странице одним нажатием кнопки, которая вызывает функцию 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');

Но ни одна из этих работ - на самом деле, таблица не меняется в размерах вообще! Что я делаю не так? Я даже не смог работать с изменением размера стола до первоначального размера, но потому, что я застрял в этой части.

  • 0
    Попробуйте это <table id="resizableTable" cellpadding="5" cellspacing="0" border="0" width="75%" > и $('#resizableTable').css({ width: $(window).innerWidth() + 'px' }); также для высоты.
  • 0
    Попробуйте var visWidth = screen.availWidth & var visHeight = screen.availHeight и используйте действительный HTML из моего предыдущего комментария.
Показать ещё 3 комментария
Теги:

2 ответа

0
Лучший ответ

Здесь 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'
    });
  });
});
Поделиться
  • 0
    По какой-то причине в веб-интерфейсе, который мы используем, он не позволяет мне задавать высоту для таблицы ... хотя у вашей скрипки <table> нет всех этих настроек - будут ли они причинами? Извините, у меня очень мало опыта в веб-разработке.
  • 0
    Вы можете использовать $(document).innerHeight() вместо $(window).innerHeight() . Это даст вам высоту всего документа или установит height в px . Я не вижу других вариантов.
Показать ещё 1 комментарий
0

Установите ширину и высоту в процентах. Например:

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';
}}
Поделиться
  • 0
    Но как это поможет изменить размер таблицы, чтобы она соответствовала видимому окну?
  • 0
    Посмотрите на изменения, которые я сделал.
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню