使用javascript动态计算表标题宽度 - 如何？ （PHP - ＆gt; javascript变量赋值）

Question

我正在尝试编写一个动态表格，其中标题宽度在所需的列数中平均分配相等的宽度（PHP变量“ $ numberofcolumns ”）。

首先，有人可以给我一个弹出更多代码的手，这样我可以轻松地动态计算表格标题宽度吗？到目前为止，我只能将php变量转换为JavaScript变量 $ noofcolumns - ＆gt; 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>

其次，我是否正确认为我可以使用PHP函数检索计算出的JavaScript变量（因为javaScript是客户端...），如：$_REQUEST['javascript_variable_name_here']？

Answer 1

<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.0000000000001像素（这完全取决于内部数字表示和精度）。此外，某些浏览器会自动将浮点值舍入到3-4个小数位，因此自己考虑这个差异会更加一致。是的，对于奇数列号，最后一列会略大一些。