我有一个表格,它显示数据来自动态内容的1列。当单元格数> 3时,我希望内容移动到第二列。 (即如果要显示3个单元格,它将以1列显示,4个单元格或更多单元格将显示在2列中。请注意,动态内容永远不会超过6个单元格。
我不得不说我可以用css和html找到自己的方式,但javascript是另一个问题......但我确实意识到这可能是唯一的方法。
任何Javascript,jQuery脚本都可以获得我的结果吗?
要显示的数据如下:
| Col1 | | Col1 || Col2 |
--------- -----------------
| Data1 | ----> | Data1 || Data4 |
| Data2 | | Data2 | etc...
| Data3 | | Data3 |
不确定这是否会有所帮助,但代码要求动态内容(并将其放入表中)是:
<table id="myTable">
<?php
$str1="";
$flag1=1;
while($rowReview1=mysql_fetch_array($resultReview1)){
$st1="";
$val=$rowReview1["ratingValue"];
$sName=$rowReview1["criteriaName"];
if($val>0){
for($ii=1;$ii<=$val;$ii++){
$st1.="<img src=\"$directory/images/orange.gif\" \>";
}
for($jj=$val;$jj<5;$jj++){
$st1.="<img src=\"$directory/images/gray.gif\" \>";
}
}else{
$st1="";
}
if($val > 0){
$str1.="<tr><td>$sName</td><td>$st1</td></tr>";
}else{
$str1.="<tr><td>$sName</td><td>N/A</td></tr>";
}
}
echo $str1;
?>
</table>
现在可以在此处查看该页面:http://www.top10banques.com/avis/index2.php?item_id=1 我正在尝试编辑的表格是分页符号“l'评估客户端”下面的表格。
再次感谢您提供的任何帮助和祝大家节日快乐!
答案 0 :(得分:1)
假设您正在使用标准表结构,首先我将所有数据放入一列,无论有多少。然后我会动态移动它们:
修改强> 这是您正在尝试做的工作样本。问题是你每行有两个div格,我以为你只有一个:
<html>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
</head>
<body>
<script type="text/javascript">
$(function(){
var allRows = $('#myTable tr');
if(allRows.length > 3) {
var extraData = $('#myTable tr:gt(2) td')
var j = 0;
for (i=0;i<extraData.length/2;i++) {
$(allRows[i]).append(extraData[j])
$(allRows[i]).append(extraData[j+1])
j=j+2;
}
$('#myTable tr:gt(2)').remove();
}
});
</script>
<table id="myTable">
<tr><td>Data1</td><td>Data11</td></tr>
<tr><td>Data2</td><td>Data21</td></tr>
<tr><td>Data3</td><td>Data31</td></tr>
<tr><td>Data4</td><td>Data41</td></tr>
<tr><td>Data5</td><td>Data51</td></tr>
<tr><td>Data6</td><td>Data61</td></tr>
</table>
</body>
</html>
注意以上解决方案仅适用于您的确切规范。如果您希望这可以重复使用(即,使用任意数量的单元格获取任意数量的行),您可能需要进行一些额外的调整。
<小时/> 为多个表格更新工作
请参阅我在Pastie上发布的代码:http://pastie.org/755963
请注意,这些表现在由类而不是 ID 引用。另外,我想说我同意这个解决方案可以(也许应该)在服务器端处理,我只是在回答OP问题时回答问题......
答案 1 :(得分:0)
我可能会在PHP中使用这些数据构建一个JSON对象,而不是首先将它注入到DOM中的DOM中。这样,你就没有javascript重构DOM中现有数据的开销,只是从头开始定位。
答案 2 :(得分:0)
我原本以为使用CSS会很简单(但我不是CSS专家)。
这样的事情涉及PHP中更通用的案例:
function multi_columns($inp_array)
{
$max_cols=4;
$target_rows=3;
if (count($dyn)>$max_cols*$target_rows) {
// won't fit in this number of cols/rows
// add more rows
$rows=count($dyn)/$max_cols;
$target_rows= ($rows==(integer)$rows) ? $rows : $rows+1;
} elseif (count($dyn)>$max_cols*$target_rows) {
// reduce to number of cols needed
$cols=count($dyn)/$target_rows;
$max_cols= ($cols==(integer)$cols) ? $cols : $max_cols;
}
print "<table>\n";
for ($y=1; $y<=$target_rows; $y++) {
print "<tr>\n";
for ($x=1; $x<=$max_cols; $x++) {
print "<td>";
if (array_key_exists($y+$x*$target_rows, $inp_array)) {
print $inp_array[$y+$x*$target_rows];
}
print "</td>";
}
print "</tr>\n";
}
print "</table>\n";
}
答案 3 :(得分:0)
这个问题需要在服务器上解决,并通过消除JavaScript脚本来提高页面性能。
其次,你可以通过不使用表来简化生活,而是使用div。
让我们先看一下拟议的数据结构。因为您使用PHP,我们将把所有输出保存在数组中。
$data=array[0...n];
这只是对业务逻辑生成进行排序。
现在让我们看看演示逻辑,首先是视觉上提出的div!
$ data_length = m
j=0 j=1 j=2 j=3 ..... j= x
i=0 [1] [4] [7] [10] []
i=1 [2] [5] [8] [11] []
i=2 [3] [6] [9] [12] []
y [] [] [] [] []
所有div都会向左浮动。 一行完成后将打印清除div。
现在我们需要定义数据与位置的关系。对表格进行一些观察,表明所有水平位置值都是3,所有垂直位置都是1(即我们需要以三步为单位迭代数组$ data!),有效地浮动我们的div,如下所示:
j=0 j=1 j=2 j=3 ..... j= x
i=0 [1] [4] [7] [10] []
伪算法
$imax=2; // spec
$number_cells = m/imax // total number of cells
$jmax=$number_cells/3 // check rounding etc left out at this stage
// you can use mod % to see if there are
// remainders etc.. on second script iteration
现在进行迭代
for ($i=0;$i<$imax-1;$i++){
for ($j=0;$j<$jmax;$j++){
$out.=wrap_in_div($data[($j*3)+(i+1)]);
}
}
请注意,我并不打算定义函数wrap_in_div
,因为它很简单。
希望它能帮助圣诞快乐!程序是我的头,所以请将伪代码翻译成真正的$! :)