各行にアイテムのリストを含むテーブルを PHP 選択で連結します。
私が現在持っているもののテスト画像。
職務記述書に見られるように、price each 列と quantity 列には、各項目の間に改行を入れて連結された異なる項目があります。私が今見つけた問題は、仕事の説明が長すぎると、価格と数量の列に合わせて次の行に移動することです。
私は多数のネストされたテーブルを試しましたが、すべてが面倒になり、現在持っている奇数偶数の CSS を台無しにしてしまいます。だから私は以下のコードに戻ってきます。
私の選択：
"SELECT DATE_FORMAT(`$quotedate`, '%d-%m-%Y') AS `$quotedate`, `$quoteno`,
`$customer`, `$contactname`, CONCAT_WS('\r\r', `$jobdescription1`,
`$jobdescription2`, `$jobdescription3`, `$jobdescription4`, `$jobdescription5`,
`$jobdescription6`, `$jobdescription7`, `$jobdescription8`, `$jobdescription9`,
`$jobdescription10`) AS `Job Description`,
CONCAT_WS('\r\r £', concat('£', `$priceeach1`), `$priceeach2`, `$priceeach3`,
`$priceeach4`, `$priceeach5`, `$priceeach6`, `$priceeach7`, `$priceeach8`,
`$priceeach9`, `$priceeach10`) AS `Price Each`,
CONCAT_WS('\r\r', `$quantity1`, `$quantity2`, `$quantity3`, `$quantity4`,
`$quantity5`, `$quantity6`, `$quantity7`, `$quantity8`, `$quantity9`, `$quantity10`)
AS`Quantity`
FROM {$table}
WHERE `$status`=0 $search ORDER BY {$table}.`$quotedate` asc";
そしてテーブル：
echo "<table id=\"quote_table\"><tr>";
for($i=0; $i<$fields_num; $i++){
$field = mysql_fetch_field($result);
echo "<th>{$field->name}</th>";
}
echo "</tr>";
while($row = mysql_fetch_row($result)){
echo "<tr id=\"data\">";
foreach($row as $cell)
echo nl2br ("<td>$cell</td>");
echo "</tr>";
}
どうすればこれを回避できるか、誰にもアイデアはありますか。ありがとう
ソリューション
bmewsing の回答を少し変更したバージョンを使用しました。
そのため、フォーマットなしで選択を使用しました。次に、次のように表にします。
while($row = mysql_fetch_array($result))
{
BuildRow($row[$quotedate], $row[$quoteno], $row[$customer], $row[$contactname],
$row[$jobdescription1], "£" . $row[$priceeach1], $row[$quantity1]);
if($row[$jobdescription2]){ BuildRow2("", "", "", "", $row[$jobdescription2], "£" . $row[$priceeach2], $row[$quantity2]);}
if($row[$jobdescription3]){ BuildRow2("", "", "", "", $row[$jobdescription3], "£" . $row[$priceeach3], $row[$quantity3]);}
if($row[$jobdescription4]){ BuildRow2("", "", "", "", $row[$jobdescription4], "£" . $row[$priceeach4], $row[$quantity4]);}
if($row[$jobdescription5]){ BuildRow2("", "", "", "", $row[$jobdescription5], "£" . $row[$priceeach5], $row[$quantity5]);}
if($row[$jobdescription6]){ BuildRow2("", "", "", "", $row[$jobdescription6], "£" . $row[$priceeach6], $row[$quantity6]);}
if($row[$jobdescription7]){ BuildRow2("", "", "", "", $row[$jobdescription7], "£" . $row[$priceeach7], $row[$quantity7]);}
if($row[$jobdescription8]){ BuildRow2("", "", "", "", $row[$jobdescription8], "£" . $row[$priceeach8], $row[$quantity8]);}
if($row[$jobdescription9]){ BuildRow2("", "", "", "", $row[$jobdescription9], "£" . $row[$priceeach9], $row[$quantity9]);}
if($row[$jobdescription10]){ BuildRow2("", "", "", "", $row[$jobdescription10], "£" . $row[$priceeach10], $row[$quantity10]);}
}
function BuildRow($qdate, $qno, $cust, $cname, $jobdesc, $priceea, $qty){
if($qdate || $qno || $cust || $cname || $jobdesc || $priceea || $qty) {
echo "<tr class=\"top\">";
echo "<td>$qdate</td>";
echo "<td>$qno</td>";
echo "<td>$cust</td>";
echo "<td>$cname</td>";
echo "<td>$jobdesc</td>";
echo "<td>$priceea</td>";
echo "<td>$qty</td>";
echo "<tr/>";
}
}
function BuildRow2($qdate2, $qno2, $cust2, $cname2, $jobdesc2, $priceea2, $qty2){
if($qdate2 || $qno2 || $cust2 || $cname2 || $jobdesc2 || $priceea2 || $qty2) {
echo "<tr class=\"middle\">";
echo "<td>$qdate2</td>";
echo "<td>$qno2</td>";
echo "<td>$cust2</td>";
echo "<td>$cname2</td>";
echo "<td>$jobdesc2</td>";
echo "<td>$priceea2</td>";
echo "<td>$qty2</td>";
echo "<tr/>";
}
}
次に、jQuery を使用して、前の「トップ」クラスに応じて「奇数」または「偶数」クラスを中間クラスに追加しました。
$(document).ready(function(){
$("#quote_table > tbody > tr.top:even").addClass("even");
$("#quote_table > tbody > tr.top:odd").addClass("odd");
$('.middle').each(function(){
var quote_class = $(this).prevUntil(".top").prev(".top").attr("class");
$(this).addClass(quote_class);
$(this).removeClass("top");
});
次に入れます：
$('tr.middle').hover(function(){
$(this).prevUntil(".top").nextUntil(".top").andSelf().prev().addClass("hover");},
function(){
$(this).prevUntil(".top").nextUntil(".top").andSelf().prev().removeClass("hover");
});
$('tr.top').hover(function(){
$(this).nextUntil(".top").andSelf().not('#add').addClass("hover");},
function(){
$(this).nextUntil(".top").andSelf().removeClass("hover");
});
マウスがその一部の上に移動したときに各「ブロック」が強調表示されるようにします。
試行錯誤してやっと完成形にたどり着いたので、もっといい方法があるかもしれません。
しかし、それはうまくいきます！