How to Group columns in front end?

Question

Table has to be displayed in front end. Following is the code.

<logic:present name="searchStudent">
    <table class=" tblSearchResult" border="1" cellspacing="0" cellpadding="0">
    <caption><b><bean:message key="label.student.details.display"/></b></caption>
    <tr>
        <td align="center"><b><bean:message key="label.student.class.code"/></b></td>
        <td align="center"><b><bean:message key="label.student.name.code"/></b></td>
        <td align="center"><b><bean:message key="label.student.section.code"/></b></td>
        <td align="center"><b><bean:message key="label.edit" /></b></td>
        <td align="center"><b><bean:message key="label.delete" /></b></td>
    </tr>
    <logic:iterate name="searchStudent" id="row">
    <tr>
        <td rowspan="2">
            <bean:write name="row" property="sclass" />
        </td>
        <td>
            <bean:write name="row" property="sname" />
        </td>
        <td>
            <bean:write name="row" property="section" />
        </td>
            
        <td rowspan="2" style="text-align:center;"><input
                onclick="clearMessage();updateStudent(this);"
                type="image"
                src="${pageContext.request.contextPath}/images/pen_edit_thick.png"
                class="imgEditPen"
                title="<bean:message key="button.tooltip.edit"/>"></td>
            <td rowspan="2" style="text-align:center;"><input
                onclick="clearMessage();deleteStudent();"
                type="image"
                src="${pageContext.request.contextPath}/images/icon_delete.gif"
                class="imgEditPen"
                title="<bean:message key="button.tooltip.remove"/>"></td>
        
    </tr>
    </logic:iterate>
    </table>
</logic:present>

It has three columns in table namely class,student name and section. Since class is same for some student it has to spanned across students having same class. Following is the sample output.

enter image description here

Data is fetched from Backend.

Tried adding rowspan but that doesnt work.Since rows are fetched from backend the UI is not proper..Based on number of students in the same class it has to span automatically in UI. — Padmaja, Aug 02 '20 at 02:22
If there are two or more identical cells with one another in a column, then this cells should be automatically joined using the HTML attribute rowspan I am not able to find a solution for dynamically create a table with joined cells in the same column. — Padmaja, Aug 03 '20 at 02:40

score 1 · Answer 1 · answered Aug 02 '20 at 01:28

1

Colspan Attribute can merge columns in a table.

<td colspan="2">Sum: $180</td>

Example

     <table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
  <tr>
    <td colspan="2">Sum: $180</td>
  </tr>
</table>

Result

Refer: https://www.w3schools.com/tags/att_td_colspan.asp

Rowspan Attribute:

 <tr>
    <td>January</td>
    <td>$100</td>
    <td rowspan="2">$50</td>
  </tr>

https://www.w3schools.com/tags/att_td_rowspan.asp

answered Aug 02 '20 at 01:28

HUGO-DEV

897
8
20

Can use these attributes when we are sure for how many rows the spanning has to be done.I don't know how many students belongs to same class. Data is being fetched from backend. Based on number of students in the same class it has to span automatically in UI. – Padmaja Aug 02 '20 at 02:15
Hi Padamja, you can dynamically create attitude on the fly using createAttribute(), example is here: https://www.w3schools.com/jsref/met_document_createattribute.asp – HUGO-DEV Aug 02 '20 at 06:43
No..Can u pls tell me how to solve it using createAttribute @HGG-Dev – Padmaja Aug 03 '20 at 01:11
If there are two or more identical cells with one another in a column, then this cells should be automatically joined using the HTML attribute rowspan I am not able to find a solution for dynamically create a table with joined cells in the same column. – Padmaja Aug 03 '20 at 02:39

How to Group columns in front end?

1 Answers1