Question

我需要使用div创建这样的显示。

我必须使用div而不是table，因为：

每个单元格的内容可能不同，但兄弟姐妹之间的高度必须相同。
单击红色部分时，将替换整列

甚至可能吗？

更新

到目前为止这是我的代码:(它很乱:(）

// $data is structured like this:
// $data[0] = ['id' => 101, 'img' => 'img1.jpg', 'username' => 'user1', 'location' => 'mycity1'];
// $data[1] = ['id' => 102, 'img' => 'img2.jpg', 'username' => 'user2', 'location' => 'mycity2'];
// $data[2] = ['id' => 103, 'img' => 'img3.jpg', 'username' => 'user3', 'location' => 'mycity3'];
if (count($data) > 1)
{
    // re-structure $data into $mydata
    // $mydata is structured like this:
    // $mydata['img'] = [ 0 => 'img1.jpg', 1 => 'img2.jpg', 2 => 'img3.jpg' ];
    // $mydata['username'] = [ 0 => 'user1', 1 => 'user2', 2 => 'user3' ];
    // $mydata['location'] = [ 0 => 'mycity1', 1 => 'mycity2', 2 => 'mycity3' ];
    // $mydata['id'] = [ 0 => 101, 1 => 102, 2 => 103 ];
    $mydata = [];
    foreach ($data as $key => $val)
    {
        $mydata['img_src'][$key] = $val['img_src'];
        $mydata['username'][$key] = $val['username'];
        $mydata['location'][$key] = $val['location']);
        $mydata['id'][$key] = $val['id'];
    }

    $ndata = count($data);
    $ncol = 4;
    $nrow = ceil($ndata / $ncol);

    $htmlview = '';
    // loop as many rows there would be. e.g. 8 data will create 2 rows
    for ($i=0; $i<$nrow; $i++)
    {
        // each row will contain a table
        $htmlrow = '<table width="100%">';

        // loop each data fields
        foreach ($mydata as $index => $value)
        {
            $htmlrow .= '<tr>'; // each field is displayed in different rows
            $nfield1 = $i * $ncol; // loop index (start)
            $nfield2 = $nfield1 + $ncol; // loop index (end)
            for ($j = $nfield1; $j < $nfield2; $j++) // 0-3; 4-7
            {
                $start = $j == $nfield1;
                $end = $j == $nfield2-1;

                $htmlcontent = '';
                switch ($index)
                {
                    case 'img_src':
                        $htmlcontent = '<img class="suggestuser-img" src="'.$value[$j].'">';
                        break;
                    case 'username':
                        $htmlcontent = '<a href="/user/'.$value[$j].'" class="suggestuser-username default-link wordbreak-all">'
                                            .$value[$j]
                                        .'</a>'
                                        ;
                        break;
                    case 'location':
                        $htmlcontent = '<span class="suggestuser-text wordbreak-all rv-b f3i">'.$value[$j].'</span>';
                        break;
                    case 'id':
                        $htmlcontent = '<button type="button" data-userid="'.$value[$j].'">follow</button>';
                        break;
                }

                $htmlrow .= '<td width="25%" class="suggestuser-col">'
                                .$htmlcontent
                            .'</td>';
            }
            $htmlrow .= '</tr>';
        }
        // end foreach ($mydata as $index => $value)
        $htmlrow .= '</table>';

        if ($i < $nrow)
        {
            // empty line to separate between tables
            $htmlrow .= '<br>';
        }

        $htmlview .= '<div>';
        $htmlview .= $htmlrow;
        $htmlview .= '</div>';
    }
    // end for ($i=0; $i<$nrow; $i++)
}
else // if (count($data) > 1)
{
    $row = $data[0];

    $htmlview = '';
    $htmlview .= '<img class="suggestuser-img" src="'.$row['img_src'].'">'
                .'<a href="/user/'.$row['username'].'" class="suggestuser-username default-link wordbreak-all">'
                    .$row['username']
                .'</a>'
                .'<span class="suggestuser-location wordbreak-all rv-b f3i">'.$row['location'].'</span>'
                .'<button type="button" data-userid="'.$row['id'].'">follow</button>'
                ;
}
// end if (count($data) > 1)

所以首先，程序调用一个ajax请求，它将显示表部分。当单击其中一个按钮时，程序将进行另一个ajax进程，该进程返回没有表的部分（'else'部分）。所以相应列中的东西需要用新数据替换。

P.S。我没有包含此代码中使用的样式，因为它们仅用于填充和字体大小..而且我的代码已经非常混乱..

Answer 1

因为似乎没有人和/或愿意回答这个问题。我想发布解决这个问题的解决方法。

逻辑非常简单：

首先，当我生成表格时，我给同一列上的每个项目一个唯一的标识符。

然后，我使用javascript手动使用多个for循环来更改具有该标识符的每个项目。

我想把代码放在这里，但它变得比问题中的代码更麻烦......

使用div

1 个答案: