Merging duplicated rows in JSP table

Question

I'm trying to generate a HTML table from an input Excel sheet using Apache POI in a JSP page. I have managed to code the part where the data is fetched from Excel and displayed as a HTML table, but the problem is some of the primary IDs has been duplicated in severals rows but they have different values in other rows. Example (2 Johns with Different Lastname):

<table>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>John</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>   

The code to generate the table :

out.println("<table>");
while (rowIter.hasNext())
{
    row =(HSSFRow)rowIter.next();

        input_fname = row.getCell(0);
        input_lname = row.getCell(1);
        input_age = row.getCell(2);

         fname  = input_fname.getRichStringCellValue().getString();
         lname = input_lname.getRichStringCellValue().getString();
         age = input_age.getRichStringCellValue().getString();

         out.println("<tr>");
         out.println("<td>"+fname+"</td>");
         out.println("<td>"+lname+"</td>");
         out.println("<td>"+age+"</td>");
         out.println("</tr>");

    }
}   
out.println("</table>");

Please anyone advise me how can I merge the duplicated rows according to the Primary ID, First Name as below :

<table>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td rowspan="2">John</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Doe</td>
<td>80</td>
</tr>
</table>   

I have tried searching for similar question but i couldn't find any solution for my problem and I'm quite a beginner in Javascript and JQuery (maybe that's the problem). Any suggestions is much appreciated. Thanks in advance!

Answer 1

You are asking the wrong question. Wouldn't it be much easier to write the HTML correctly in the first place rather than try to do some merge on the HTML?

Thus, loop over the entries and put them in some suitable datastructure e.g. a Map keyed by fname and with a list as the value. Person class is a simple bean to hold the data.

Map<String, List<Person>> people = new TreeMap<String, List<Person>> ();

while (rowIter.hasNext())
{
    row =(HSSFRow)rowIter.next();

        input_fname = row.getCell(0);
        input_lname = row.getCell(1);
        input_age = row.getCell(2);

         fname  = input_fname.getRichStringCellValue().getString();
         lname = input_lname.getRichStringCellValue().getString();
         age = input_age.getRichStringCellValue().getString();

         Person person = new Person(fname, lname, age);

         if(! people.containsKey(person.fname)){
            people.put(person.fname, new ArrayList<Person>());
         }

         people.get(person.fname).add(person);
    }
} 

Then loop over this data structure and write the HTML:

for(String key : people.keySet()){
    List<Person>  persons = people.get(key));
    int rowSpan = persons.size();

    //write the HTML accordingly.
} 

Answer 2

You can:

• add a class when printing the name in your back-end code e.g. out.println("<td class="fname">"+fname+"</td>");

• and then with jQuery

  var last_selected_name = "";
  
  /* Get all the first names cells */
  jQuery('td.fname').each(function(i,obj){
  current_name = jQuery(obj).text();  
  
  /* check for repeated names */
  if (current_name == last_selected_name)
  {
      jQuery("td.fname:contains('"+current_name+"')").each(function(index,object){
  
          if (index == 0)
          {
              /* check if already has rowspan attribtue */
              row_span = jQuery(object).attr('rowspan')?jQuery(object).attr('rowspan'):1;
  
              /* add one */
              row_span++;
  
              /* include the new rowspan number  */
              jQuery(object).attr('rowspan',row_span)
  
          }
          else
          {
              /* delete the other first name cells */
              jQuery(object).remove();
          }
      })
  }
  last_selected_name = current_name;
  })