我需要使用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。我没有包含此代码中使用的样式,因为它们仅用于填充和字体大小..而且我的代码已经非常混乱..
答案 0 :(得分:0)
因为似乎没有人和/或愿意回答这个问题。我想发布解决这个问题的解决方法。
逻辑非常简单:
首先,当我生成表格时,我给同一列上的每个项目一个唯一的标识符。
然后,我使用javascript手动使用多个for
循环来更改具有该标识符的每个项目。
我想把代码放在这里,但它变得比问题中的代码更麻烦......