2列中的動態內容（而不是1列！）

Question

我有一張表，它從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”下面的表。

再次感謝您提供的任何幫助，祝大家節日快樂！

Answer 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的要求回答問題。

Answer 2

我可能會在PHP中使用此數據構建一個JSON對象，而不是一開始將其注入DOM中。 這樣，您就沒有javascript重組DOM中現有數據的開銷，它只是從頭開始進行定位。

Answer 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";
   }

Answer 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分隔（即，我們需要以3的步長對數組$ 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布局。

希望對聖誕節有幫助！ 程序不在我的腦海，所以請把偽代碼轉換成真實的$！ :)

2列中的動態內容（而不是1列！）

問題描述

4 個解決方案

解決方案1
1 已采納 2009-12-24 01:26:59

解決方案2
0 2009-12-24 04:59:11

解決方案3
0 2009-12-24 11:09:30

解決方案4
0 2009-12-24 19:23:15

2列中的動態內容（而不是1列！）

問題描述

4 個解決方案

解決方案1 1 已采納 2009-12-24 01:26:59

解決方案2 0 2009-12-24 04:59:11

解決方案3 0 2009-12-24 11:09:30

解決方案4 0 2009-12-24 19:23:15

解決方案1
1 已采納 2009-12-24 01:26:59

解決方案2
0 2009-12-24 04:59:11

解決方案3
0 2009-12-24 11:09:30

解決方案4
0 2009-12-24 19:23:15