如果条件为true,则合并HTML TABLE ROWS

时间:2011-08-25 09:05:42

标签: javascript

我从Mysql中获取了一个表的数据。每行有5个单元格。

如果两行的第四个单元格值相同,那么我想合并这些行。

我尝试使用javascript数组,但我无法合并行。任何人都可以分享他们的想法或发送任何示例代码。提前谢谢。

4 个答案:

答案 0 :(得分:1)

我就像是张贴了一张照片,但是因为我是新的并且没有重新报道,所以没有上传... 好吧,here the link of the photo

如果这就是你所要求的...我有一个很长的代码..我不知道它是否有效但它为我工作

int itemsize = 5; //number of rows that is expected to be in merged
for(int item=0; i<itemsize ; i++){//this jsp
%>
  <tr>
    <td><%=value%></td>
    <td><%=value%></td>
    <%
      if(itemsize > 1 && item==0){ //if the itemsize more than 1, and it is the first row, it will put a rowspan that has the value of the itemsize or the number of row to be merged
      %>
        <td rowspan='<%=itemsize %>'><%=value%></td>
        <td rowspan='<%=itemsize %>'><%=value%></td>
        <td rowspan='<%=itemsize %>'><%=value%></td>
      <%
      }else if(itemsize > 1 && item>0){
       //on the second loop this will be executed but bcoz we have rowspan, <td> should be eliminated on the succeeding row*
      }else{ // but if there is only one row to be displayed, no rowspan is needed, so ordinary <td will be written..
      %>
        <td><%=value%></td>
        <td><%=value%></td>
        <td><%=value%></td>          
      <%
      }
    %>
  </tr>
<%
}

<强>编辑:

这是我的新代码。我用php做了一个样本。尝试运行它。对不起代码,这是我的第一个PHP。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style>
    body{ font-family: tahoma, Arial; font-size: 9pt;}
    table {border-collapse:collapse; font: tahoma, Arial 9pt;}
    table th{font-family: tahoma, Arial, Geneva, sans-serif; font-size:9pt; width:75px; background-color:#999; color:#000; text-transform:uppercase;}
    table th, td{ padding:4px 6px; text-transform:capitalize;}
</style>

</head>

<body>
    <table cellspacing="0" cellpadding="0" border="1" bordercolor="#000000"> 
    <thead>
        <th style="width:10px; text-align:right">Count</th>
      <th>Detail 1</th>
      <th>Head 2</th>
      <th>Head 3</th>
      <th>Head 4</th>
      <th>Head 5</th>
      <th>Head 6</th>
      <th>Detail 2</th>
    </thead>

    <tbody>   
            <?php               
                $arr_detail_1 = array("angelo", "philip", "raymond", "jonathan", "pedro");
                $arr_detail_2  = array("Cavite", "Laguna", "Quezon", "Japan", "Surigao");
                $arr_detail_3 = array("10-dec", "11-Sep", "12-Feb", "22-July", "15-Oct");
                $arr_detail_4  = array("Pink", "blue", "Green", "White", "Purple");
                $arr_detail_5  = array("Computer", "Door Lock", "Pencil", "Cup", "Jeans");

        $a=array("screw");
        $b=array("ball","paper","Big","Liquid","id");
        $c=array("Sewing");
        $d=array("Running","Biking","Swimming");
        $e=array("Tree","planting","root","fruits","Rain","Grass");

        $f=array("driver");
        $g=array("Pen","bag","Brother","eraser","lace");
        $h=array("machine");
        $i=array("barefoot","with no bike","technique");
        $j=array("planting","tree","crops","bearig-trees","Forest","Hopper");

        $arr1 = array($a, $b, $c, $d, $e);
                $arr2 = array($f, $g, $h, $i, $j);              


            $rowcount = 1;
                for ($i=0; $i<count($arr1); $i++){
                 // echo "The number is " . $i . "<br />";

                 $temp_arr_1 = $arr1[$i];
                 $temp_arr_2 = $arr2[$i];
                 for($x=0; $x<count($temp_arr_1); $x++){

                     ?>
                        <tr>
                            <td align="right"><?php echo $rowcount; ?>.</td>
              <td><?php echo $temp_arr_1[$x]; ?></td>
              <td><?php echo $temp_arr_2[$x]; ?></td>
              <?php
                            $span_count = count($temp_arr_1);
              if($span_count>1 && $x==0){

                                ?>
                  <td rowspan="<?php echo count($temp_arr_1);?>"><?php echo $arr_detail_1[$i]; ?></td>
                  <td rowspan="<?php echo count($temp_arr_1);?>"><?php echo $arr_detail_2[$i]; ?></td>
                  <td rowspan="<?php echo count($temp_arr_1);?>"><?php echo $arr_detail_3[$i]; ?></td>
                  <td rowspan="<?php echo count($temp_arr_1);?>"><?php echo $arr_detail_4[$i]; ?></td>
                  <td rowspan="<?php echo count($temp_arr_1);?>"><?php echo $arr_detail_5[$i]; ?></td>
                                <?php
                            }else if($span_count>1 && $x>0){
                                //
                            }else{
                                ?>
                  <td><?php echo $arr_detail_1[$i]; ?></td>
                  <td><?php echo $arr_detail_2[$i]; ?></td>
                  <td><?php echo $arr_detail_3[$i]; ?></td>
                  <td><?php echo $arr_detail_4[$i]; ?></td>
                  <td><?php echo $arr_detail_5[$i]; ?></td>
                                <?php
                            }
                            ?>
                        </tr>
                     <?php
                     $rowcount++;
                    }
                }
      ?>  
    </tbody>
  </table>
</body>
</html>

我确实使用数组作为dbase ...;]并且像我用JSP一样做代码,所以我希望你能理解。我真的很新的PHP。即使在java中,我也不确定我在做什么是正确的!我编码只要它运行,即使它慢..但我试图解决这个问题!祝你的项目evangeline好运。

答案 1 :(得分:1)

如果您因为某些原因想要在javascript中执行此操作,那么这是一个非常快速的示例:

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
    <table border="2" id="aTable">
        <tr>
            <td>First</td>
            <td>A</td>
        </tr>
        <tr>
            <td>First</td>
            <td>B</td>
        </tr>
        <tr>
            <td>Second</td>
            <td>V</td>
        </tr>
        <tr>
            <td>Third</td>
            <td>D</td>
        </tr>
        <tr>
            <td>Third</td>
            <td>E</td>
        </tr>
    </table>
</body>
    <script type="text/javascript">
        function MergeCommonRows(table, columnIndexToMerge){
            previous = null;
            cellToExtend = null;
            table.find("td:nth-child("+columnIndexToMerge+")").each(function(){
                jthis = $(this);
                content = jthis.text()
                if(previous == content){
                    jthis.remove();
                    if(cellToExtend.attr("rowspan") == undefined){
                        cellToExtend.attr("rowspan", 2);
                    }
                    else{
                        currentrowspan = parseInt(cellToExtend.attr("rowspan"));
                        cellToExtend.attr("rowspan", currentrowspan+1);
                    }
                }
                else{
                    previous = content;
                    cellToExtend = jthis;
                }
            });
        };

        MergeCommonRows($("#aTable"), 1);
    </script>
</html>

答案 2 :(得分:0)

使用javascript不是一个好主意。首先,一些用户可能已停用js,甚至不可用(例如手机浏览器)。

我建议从mysql获取数据,在php中循环它们(如果你使用php),在进行任何必要的合并时将数据复制到新数组,然后打印新的“正确”数组。

你使用的是php吗?您需要的示例代码必须是服务器端(例如php)。

答案 3 :(得分:0)

您应该在第一行rowspan="2"中给出最后一个单元格,并省略下一行中的最后一个单元格。

<table>
    <tr>
        <td>some value</td>
        <td>some value</td>
        <td>some value</td>
        <td>some value</td>
        <td rowspan="2">some value</td>
   </tr>
   <tr>
        <td>some value</td>
        <td>some value</td>
        <td>some value</td>
        <td>some value</td>
   </tr>
</table>