2列中的动态内容（而不是一列！）答案

【问题标题】：Dynamic content in 2 columns (rather than one!)2列中的动态内容（而不是一列！）
【发布时间】：2010-12-29 16:43:22
【问题描述】：

我有一个表格，它在 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'evaluation des clients”下方的表格。

再次感谢您提供的任何帮助，祝大家节日快乐！

【问题讨论】：

标签： php javascript jquery css dom-manipulation

【解决方案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

请注意，这些表现在由 classes 而不是 ids 引用。另外，我想说我同意这个解决方案可以（也许应该）在服务器端处理，我只是在回答 OP 提出的问题......

【讨论】：

哦...抱歉校对不佳和缺乏澄清。我正在研究类似于您的第一个示例的内容（如果要显示 3 个单元格，则为 Col1 和 Col2）。感谢您帮助杰森！ ;-)
FWIW 问题中的代码渲染和答案在我看来完全一样...
@emddudley - 那是因为他回答后我把它放在那里，然后我去添加我的答案:)
嗯，我试过了，但没有用...我修改了我的问题，附加了调用动态内容的代码并将其放在表格中。再次感谢您的帮助。
非常感谢 Jason...我试图自己解决这个问题，但花了 5 个小时来寻找解决方案...您的解决方案非常适合我的需要。我真的很感谢你花时间指导我完成这件事（再次抱歉从一开始就不是很清楚）。顺便说一句圣诞快乐！

【解决方案2】：

我可能会在 PHP 中使用这些数据构建一个 JSON 对象，而不是一开始就将其注入 DOM。这样，您就没有 javascript 重组 DOM 中现有数据的开销，它只是从头开始定位它。

【讨论】：

【解决方案3】：

我原以为使用 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";
   }

【讨论】：

嗨 Symcbean，我更喜欢这个解决方案，但我无法让它与我的表一起正常工作......我可能错了，但我认为我不能这样做CSS...
代码有点问题 - 尝试用 $inp_array 替换对 $dyn 的引用，并在 $x 和 $y 循环中使用 0 作为起点。 C.

【解决方案4】：

这个问题需要在服务器端解决，并通过消除 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 定义为微不足道的布局。

希望它可以帮助圣诞快乐！程序出乎我的意料，所以请把伪代码翻译成真正的 $！ :)

【讨论】：

实际上，它不应该是 div，因为它是表格数据...表格功能强大，可以用来显示表格数据。
没有人怀疑表格对于数据的强大功能，我使用 div 是因为它更容易显示算法并建议将表示与逻辑分开的方法