Concat专栏，任何想法如何获取内联数据？

时间：2013-02-02 20:10:41

标签： php html-table concatenation concat

在PHP select中有一个表格，其中每行中的项目列表连在一起。

测试我目前所拥有的图像。Current Table

正如工作描述所见，每个和每个数量列的价格都有不同的项目，每个项目之间都有换行符。我现在发现的问题是，如果工作描述很长，它会进入下一行，与每个和数量列的价格保持一致。

我已经尝试了很多嵌套表，但最终都变得混乱并破坏了我目前所拥有的奇怪的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");
});


enter image description here


然后我说：

$('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");
});

当鼠标移动到其中的一部分时，每个“块”都会突出显示。
我只通过反复试验得到了完成的解决方案，所以可能有更好的方法。
但它有效！

3 个答案:

答案 0 :(得分：1)

不要在SQL查询中进行格式化（没有换行符或连接符号）。选择单个属性然后构建表。每个描述，价格，数量集合的行。

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)){

 //build date, number, customer, name and the first
 //job description, price and qty
 BuildRow($row[$quotedate], $row[$quoteno], $row[$customer], $row[$contactname], 
           $row[$jobdescription1], "£" . $row[$priceeach1], $row[$quantity1]);
 //now build a row/cells for each of the
 //additional description, price, qty in the result row.
 BuildRow("", "", "", "", $row[$jobdescription2], $row[$priceeach2], $row[$quantity2]);
 //etc...
}

function BuildRow($date, $num, $cust, $name, $descrip, $price, $qty){
 //don't build if empty
 if($date || $num || $cust || $name || $descrip || $price || $qty) {
   echo "<tr >";
   echo "<td>$date</td>";
   //etc...
   echo "</tr>";
 }
}

通过一些样式，您应该能够让它看起来像每个引用的“块”。

答案 1 :(得分：0)

获取描述和数量相同高度的最简单方法是使用这样的嵌套表：

<style>
    table {border-collapse: collapse; border-spacing: 0;}
    td {vertical-align: top; margin: 0; }
    .outertable td {border: 1px solid black; }
    .inner {border-right: 1px solid black; }
    .innertable td {width: 100px; border-top-style: none; border-bottom-style: none;}
    .innertable td.desc {border-left-style: none;}
    .quantity {border-right-style: none;}
</style>
<table class="outertable">
    <tr>
        <td>02-02-2013</td>
        <td>102</td>
        <td>test</td>
        <td>test</td>
        <td colspan="3" class="holder">
            <table class="innertable">
                <tr>
                    <td class="desc">testtesttest testtesttesttestt esttesttest</td>
                    <td class="price">$1</td>
                    <td class="quantity">1</td>
                </tr>
                <tr>
                    <td class="desc">testtesttest </td>
                    <td class="price">$1</td>
                    <td class="quantity">1</td>
                </tr>
                <tr>
                    <td class="desc">testtesttest esttesttest</td>
                    <td class="price">$1</td>
                    <td class="quantity">1</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>02-02-2013</td>
        <td>102</td>
        <td>test</td>
        <td>test</td>
        <td colspan="3" class="holder">
            <table class="innertable">
                <tr>
                    <td class="desc">testtesttest testtesttesttestt esttesttest</td>
                    <td class="price">$1</td>
                    <td class="quantity">1</td>
                </tr>
                <tr>
                    <td class="desc">testtesttest </td>
                    <td class="price">$1</td>
                    <td class="quantity">1</td>
                </tr>
                <tr>
                    <td class="desc">testtesttest esttesttest</td>
                    <td class="price">$1</td>
                    <td class="quantity">1</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

有关正常工作的样本，请参阅http://jsfiddle.net/4tJyq/。

答案 2 :(得分：0)

如何使用可折叠样式进行职位描述？您可以显示前50个字符，并允许最终用户单击以查看全文。

看一下这个参考：http://twitter.github.com/bootstrap/javascript.html#collapse

欢呼声。

相关问题
最新问题