Динамически вычислять ширину заголовков таблицы с помощью javascript — как? (PHP -> назначение переменной javascript)

В настоящее время я пытаюсь написать динамическую таблицу, в которой ширина заголовка разделена на равные ширины поровну по необходимому количеству столбцов (переменная PHP "$numberofcolumns").

Во-первых, может ли кто-нибудь помочь мне добавить еще немного кода, который облегчит мне динамический расчет ширины заголовка таблицы? До сих пор я только превращал переменную php в переменную JavaScript $noofcolumns -> var columnno, как показано ниже — теперь я полностью потерян!

Моя общая ширина таблицы, оставшаяся для использования, составляет 80% (20% уже используются для столбца с фиксированной шириной).

i.e.
if columnno = 3 -> table heading width = 80% / 3
if columnno = 4 -> table heading width = 80% / 4
etc...

Раньше я пытался использовать функцию calc() CSS3, но она некорректно отображается в большом количестве браузеров! (отсюда и требование javaScript!) Из-за этой проблемы было бы проще, если бы результат кода JavaScript давал значение в пикселях!

<script type="text/javascript">
var columnno = <?php echo $numberofcolumns; ?>;
</script>

Во-вторых, правильно ли я думаю, что я могу получить рассчитанную переменную JavaScript (поскольку javaScript является клиентской стороной...) с помощью функции PHP, такой как: $_REQUEST['javascript_variable_name_here']?


javascript php dynamic width
person Justice    schedule 25.08.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward 

<script type="text/javascript">
var columnno = <?php echo $numberofcolumns; ?>;
var headingWidth = Math.floor(80 / columnno);
var lastHeadingWidth = 80 - headingWidth;

// now you assign these values to your columns. I'd suggest you use jQuery, assign a class to each column (col1, col2, etc., using PHP), and then:

// we assume i = 1 is that 20% fixed column
for(i = 2; i < columnno; i++) {
    $('.col' + i).css('width', headingWidth + '%');
}
$('.col' + columnno).css('width', lastHeadingWidth + '%');
</script>

Почему Math.floor и lastHeadingWidth? Если вы разделите 80 на 3, а затем умножите результат на 3, вы обнаружите, что вам не хватает 0,00000000000001 пикселя (все дело во внутреннем представлении чисел и точности). Кроме того, некоторые браузеры автоматически округляют значения с плавающей запятой до 3-4 знаков после запятой, поэтому учет этой разницы более последователен. Да, для нечетных номеров столбцов последний будет немного больше.

person Sergiu Paraschiv    schedule 25.08.2013
comment
Вы не правы насчет $_REQUEST. $_REQUEST — это массив, содержащий $_POST + $_GET + $_COOKIE. Если вам нужно что-то отправить из браузера на сервер, вам нужно отправить это с помощью HTTP-запроса. Посмотрите на АЯКС. - person Sergiu Paraschiv; 25.08.2013
comment
Большое спасибо! Тогда посмотрю на AJAX! - person Justice; 26.08.2013