0

我目前正在尝试编写一个动态表，其中标题宽度在所需的列数（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>

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

4

1 回答 1

0 
<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 位，因此您自己考虑这种差异会更加一致。是的，对于奇数列号，最后一个会稍大一些。

于 2013-08-25T09:17:18.140 回答