Скроллируемая таблица ненавязчивого скрипта - PullRequest
Новая
       7

Скроллируемая таблица ненавязчивого скрипта

1 голос
/ 25 августа 2011

Вот хороший фрагмент кода, который работает справедливо во всех браузерах: http://www.imaputz.com/cssStuff/bigFourVersion.html

Поскольку есть вещи, которые необходимо вычислить для каждой конкретной таблицы (дополнительное пространство для полосы прокрутки, фиксированная ширина для каждой ячейки)Я хотел бы создать JavaScript, который изменяет таблицу, чтобы сделать ее прокручиваемой.

Такие сценарии уже существуют, то есть http://www.farinspace.com/jquery-scrollable-table-plugin/, но все они должны указывать высоту таблицы.Я хотел бы извлечь высоту из CSS, чтобы сделать скрипт ненавязчивым.

Если я напишу высоту как встроенный стиль, все браузеры смогут читать свойство table.style.height.Но когда используется внешний стиль 

<style>
  .scrollTable { display: block; overflow: hidden; height: 200px; }
</style>

, только Firefox может читать свойство offsetHeight/clientHeight, как и ожидалось.Я полагаю, что другие браузеры не могут изменить макет таблицы на блокировку.

Единственное, что я понял, - это чтение внешнего CSS 

function getCSS(rule,prop) {
  if(!(document && document.styleSheets)) return;
  var result="", ds = document.styleSheets;
  for(var i=0; i<ds.length; i++) {
    var r = getCSS1(ds[i],rule,prop);
    if(r) result = r;
  }
  return result;
}
function getCSS1(sheet,rule,prop) {
  var rules = sheet.cssRules? sheet.cssRules: sheet.rules;
  var result = "";
  for(var i=0; i<rules.length; i++) {
    var r = rules[i].selectorText.toLowerCase();
    if(r.indexOf(rule)==-1) continue;
    if(r.lastIndexOf(rule)!=r.length-rule.length) continue;
    var p = rules[i].style[prop];
    if(p) result = p;
  }
  return result;
}

var height = getCSS(".scrollTable","height");

Но высота может быть указана иначе:id, другой класс или унаследованный, так что я, вероятно, ошибаюсь.Есть ли другой способ угадать высоту стола?Я собираюсь сдаться.

Короче

Я хочу этот код 

<script src="scrollTable.js"></script> // load the script
<style> .scrollTable { height: 200px; } // set the CSS
<table class="scrollTable">...</table> // script should do all the tricks

Мой сценарий может выполнить все трюкикроме как получить высоту стола.Как извлечь это?

Ответы [ 5 ]

1 голос
/ 28 августа 2011

С jQuery вы можете использовать .css() функцию: 

table_height = $("table.scrollTable").css("height");

Это вернет высоту вашего стола, включая px. Таким образом, вы можете извлечь только число с помощью другой функции JavaScript.

1 голос
/ 27 августа 2011

Почему бы не заключить <table> в <div>? Таким образом, вы сможете получить высоту <div>, даже если она находится во внешнем CSS.

0 голосов
/ 28 августа 2011

Вы можете использовать

document.getElementById("ID").clientHeight

Это сработало для меня в IE8 и Chrome, когда я тестировал height через

  • html
  • встроенный стиль
  • таблица стилей

Вот что я сделал: 

<table height="350" id="one">
<table> 

<table style="height:400px;" id="two">
<table> 

<table class="height" id="three">
<table>

и 

alert(document.getElementById("one").clientHeight);

alert(document.getElementById("two").clientHeight);

alert(document.getElementById("three").clientHeight);

Работапример: http://jsfiddle.net/jasongennaro/h9B2j/

РЕДАКТИРОВАТЬ

Что-то еще должно мешать коду, я думаю, как

document.getElementById("").clientHeight;

работает для меня даже без установленной высоты.

См. другой пример здесь: http://jsfiddle.net/jasongennaro/h9B2j/2/

0 голосов
/ 25 августа 2011

Является ли getComputedStyle ответом? Смотрите здесь: http://blog.stchur.com/2006/06/21/css-computed-style/

0 голосов
/ 25 августа 2011

Если вы используете jQuery (вы упомянули плагин jQuery), вы можете рассчитать высоту элемента, используя $('table.selector').height().

...