 |
สอบถามการ merge ข้อมูลใน Table ที่ข้อมูล ซ้ำกันครับ |
| |
 |
|
|
 |
 |
|
merge cell ใน HTML ใช้ colspan, rowspan
https://www.w3schools.com/html/html_table_colspan_rowspan.asp
สำหรับ dynamic content หรือ การดึงข้อมูลมาแสดงจาก DB ร่วมกับ colspan, rowspan
จะมีความซับซ้อนในการเข้าลูป ตามโครงสร้าง HTML table ในกรณีนี้มีสองทางเลือก
ลองดูตัวอย่างแล้วนำไปประยุกต์
1. ทำจากฝั่ง server (ตัวอย่าง คอลัมน์เดียว)
Code (PHP)
$data = array(
array("name" => "John", "age" => 28, "city" => "New York"),
array("name" => "Jane", "age" => 35, "city" => "San Francisco"),
array("name" => "Tom", "age" => 21, "city" => "New York"),
array("name" => "Mary", "age" => 29, "city" => "San Francisco"),
array("name" => "Peter", "age" => 33, "city" => "New York"),
array("name" => "Kate", "age" => 24, "city" => "San Francisco")
);
// Group the data by city
$cities = array();
foreach ($data as $item) {
$city = $item['city'];
if (!isset($cities[$city])) {
$cities[$city] = array();
}
array_push($cities[$city], $item);
}
// Output the table
echo "<table>";
echo "<thead><tr><th>Name</th><th>Age</th><th>City</th></tr></thead>";
echo "<tbody>";
foreach ($cities as $city => $items) {
$rowspan = count($items);
foreach ($items as $key => $item) {
echo "<tr>";
echo "<td>{$item['name']}</td>";
echo "<td>{$item['age']}</td>";
if ($key == 0) {
echo "<td rowspan='$rowspan'>$city</td>";
}
echo "</tr>";
}
}
echo "</tbody>";
echo "</table>";
2. ใช้ JS แก้ output Table
https://stackoverflow.com/a/56588036
https://jsfiddle.net/shed/bn3u63pe/
|
 |
 |
 |
 |
| Date :
2023-03-28 22:51:09 |
By :
009 |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
 ตอบความคิดเห็นที่ : 7 เขียนโดย : 009 เมื่อวันที่ 2023-03-29 12:44:25
รายละเอียดของการตอบ ::
ขอบคุณมากๆครับ ใช้ตัวนี้
table td, table th {
page-break-inside: avoid;
}
ช่วยได้เลยครับ
สอบถามเพื่อเป็นความรู้หน่อยครับถ้ากรณีที่มากกว่า 2 คอมลัมต้องเขียนประมาณไหนครับ ผมลองแล้วมัน loop ซ้อนไปอีก
Code (PHP)
$data = array(
array("name" => "John", "age" => 28, "city" => "New York"),
array("name" => "Jane", "age" => 35, "city" => "San Francisco"),
array("name" => "Tom", "age" => 21, "city" => "New York"),
array("name" => "Mary", "age" => 29, "city" => "San Francisco"),
array("name" => "Peter", "age" => 33, "city" => "New York"),
array("name" => "Kate", "age" => 24, "city" => "San Francisco")
);
// Group the data by city
$cities = array();
foreach ($data as $item) {
$city = $item['city'];
if (!isset($cities[$city])) {
$cities[$city] = array();
}
array_push($cities[$city], $item);
}
// Output the table
echo "<table>";
echo "<thead><tr><th>Name</th><th>Age</th><th>City</th></tr></thead>";
echo "<tbody>";
foreach ($cities as $city => $items) {
$rowspan = count($items);
foreach ($items as $key => $item) {
echo "<tr>";
echo "<td>{$item['name']}</td>";
echo "<td>{$item['age']}</td>";
if ($key == 0) {
echo "<td rowspan='$rowspan'>$city</td>";
}
echo "</tr>";
}
}
echo "</tbody>";
echo "</table>";
|
ประวัติการแก้ไข
2023-03-29 13:10:32
2023-03-29 13:11:52
| |
|
|
| |
| Date :
2023-03-29 13:08:58 |
By :
benlovehi5 |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
