javascript - PHP表行跨度基于关键mysql的总计

Question

我有这张表:表中的数据是mysql查询的结果。每个项目共有8个类别。该表将显示每个项目及其仅具有数量的类别。如果类中的项目数量为 0，则不会显示该类。(此解释仅供您理解。)到目前为止，我所得到的是这样的:

     |--------------|------------|----------|------------|
     |  Item Name   | Item Class | Quantity |    Total   |
     |--------------|------------|----------|------------|
     |              |     A      |    10    |
     |              |------------|----------|
     | Upper Bearing|     B      |     5    |
     |              |------------|----------|------------|
     |              |     C      |     4    |     19     |
     |--------------|------------|----------|------------|
     |              |     A      |     8    |            
     | Lower Bearing|------------|----------|------------|
     |              |     D      |     2    |     10     |
     |--------------|------------|----------|------------|
     |              |     B      |     2    |          
     |              |------------|----------|
     |     Vane     |     D      |    11    |
     |              |------------|----------|------------|
     |              |     E      |     2    |     15     |
     |--------------|------------|----------|------------|

总计列是每件商品的所有数量的总和。例如，上轴承，总计=数量(A)+数量(B)+数量(C)= 10+5+4= 19。请注意，每个类别的数量是一些计算的结果，而不是直接从数据库中选择。

我想做的是跨行 <td> 总计，以便它像项目名称一样填充整行。

预期输出应如下所示:

     |--------------|------------|----------|------------|
     |  Item Name   | Item Class | Quantity |    Total   |
     |--------------|------------|----------|------------|
     |              |     A      |    10    |            |
     |              |------------|----------|            |
     | Upper Bearing|     B      |     5    |     19     |
     |              |------------|----------|            |
     |              |     C      |     4    |            |
     |--------------|------------|----------|------------|
     |              |     A      |     8    |            |
     | Lower Bearing|------------|----------|     10     |
     |              |     D      |     2    |            |
     |--------------|------------|----------|------------|
     |              |     B      |     2    |            |
     |              |------------|----------|            |
     |     Vane     |     D      |    11    |     15     |
     |              |------------|----------|            |
     |              |     E      |     2    |            |
     |--------------|------------|----------|------------|

这是我的代码:

<table>
  <tr>
    <td>Item Name</td>
    <td>Item Class</td>
    <td>Item Quantity</td>
    <td>Total</td>
  </tr>

<?php
$result=mysql_query("SELECT * FROM tblitem INNER JOIN itemloc ON tblitem.itemId=itemloc.itemId INNER JOIN refitemclass ON tblitem.itemClassId=refitemclass.itemClassId");

$classqty=array();
while($row = mysql_fetch_array($result)){
    $item=$row['itemNm'];
    $class=$row['itemClassName'];

    if(!isset($classqty[$item][$class]))
    {
    $classqty[$item][$class] = 0;
    }
    if(is_null($row['itemLocCheckOut'])){
        $classqty[$item][$class] += $row['itemLocQty'];
    }
    else{
        $classqty[$item][$class] -= $row['itemLocQty'];
    }
}

$sum=array();
    foreach($classqty as $k1=>$v1){
        foreach($v1 as $k2=>$v2){
            if(!isset($sum[$k1])){
            $sum[$k1] = $v2;
            }
            else
            {
            $sum[$k1] += $v2;  /*calculation for total*/
            }
?>



<tr id="table2">

<td><?php echo $k1;?></td> /*output the item name*/
<td><?php echo $k2;?></td> /*output the item class*/
<td><?php echo $v2;?></td> /*output the quantity for item class*/
<?php
}
?>
<td><?php echo $sum[$k1];?></td> /*output the total*/
</tr>
<?php
}
?>

</table>

这里是为项目名称创建行距的 JavaScript。

<script>
    $(document).ready(function() {
       var span = 1;
       var prevTD = "";
       var prevTDVal = "";
       $("#table2 td:first-child").each(function() { //for each first td in every tr
          var $this = $(this);
          if ($this.text() == prevTDVal) { // check value of previous td text
             span++;
             if (prevTD != "") {
                prevTD.attr("rowspan", span); // add attribute to previous td
                $this.remove(); // remove current td
             }
          } else {
             prevTD     = $this; // store current td 
             prevTDVal  = $this.text();
             span       = 1;
          }
       });
    });
    </script>

我尝试过类似 <td rowspan=<?=count[$k2]?><?php echo $sum[$k1];?></td> 的操作并通过更改 $("#table2 td:first-child") 来制作与项目名称相同的 javascript至$("#table2 td:last-child")但这些都不起作用。总计仍与项目类别的最后一行位于同一行。

P/S:请不要建议我对计算部分进行任何更改，因为计算工作正常并且结果都是正确的。我的问题只是总量的输出结构。

Answer 1

使用当前的 javascript 代码，您只需在设置 rowspan 之后添加以下两行即可对于td:first-child -

prevTD.siblings().last().attr("rowspan", span).text($this.siblings().last().text());
$this.siblings().last().remove();

所以你的代码现在看起来像 -

<script>
    $(document).ready(function() {
       var span = 1;
       var prevTD = "";
       var prevTDVal = "";
       $("#table2 td:first-child").each(function() { //for each first td in every tr
          var $this = $(this);
          if ($this.text() == prevTDVal) { // check value of previous td text
             span++;
             if (prevTD != "") {
                prevTD.attr("rowspan", span); // add attribute to previous td
                prevTD.siblings().last().attr("rowspan", span).text($this.siblings().last().text()); // add rowspan attribute to previous td's last sibling, and set the text
                $this.siblings().last().remove(); // remove the current td's last sibling
                $this.remove(); // remove current td
             }
          } else {
             prevTD     = $this; // store current td 
             prevTDVal  = $this.text();
             span       = 1;
          }
       });
    });
</script>

在此行动jsFiddle example - http://jsfiddle.net/aoqq43yg/

<小时/>

编辑

因为只有每组的最后一行有 Total单元格，您需要找到这些行，将它们移动到组的顶部，并增加 rowspan 。使用与其他 JavaScript 类似的循环 -

   var prevTR = 0;
   $("#table2 tr").each(function(index,value) { // each row
       if($(this).children("td:eq(3)").text() != ""){ // if 4th td is not empty
           $("#table2 tr:eq("+prevTR+")").append($(this).children("td:eq(3)").attr("rowspan", (index+1) - prevTR)); // remove td, and move to the top row, and set the rowspan
          prevTR = index+1; // reset to the next row
       }
       else {
       }
   });

确保先运行此代码，然后再运行其他代码。你的完整代码看起来像 -

<script>
$(document).ready(function() {

   var prevTR = 0;
   $("#table2 tr").each(function(index,value) {
       if($(this).children("td:eq(3)").text() != ""){
           $("#table2 tr:eq("+prevTR+")").append($(this).children("td:eq(3)").attr("rowspan", (index+1) - prevTR));
          prevTR = index+1;
       }
       else {
       }
   });

   var span = 1;
   var prevTD = "";
   var prevTDVal = "";

   $("#table2 td:first-child").each(function() { //for each first td in every tr
      var $this = $(this);
      if ($this.text() == prevTDVal) { // check value of previous td text
         span++;
         if (prevTD != "") {
            prevTD.attr("rowspan", span); // add attribute to previous td
            $this.remove(); // remove current td
         }
      } else {
         prevTD     = $this; // store current td 
         prevTDVal  = $this.text();
         span       = 1;
      }
   });
   var preTR = 0;
});
</script>

已更新jsFiddle example - http://jsfiddle.net/aoqq43yg/1/