Play Games

Search This Blog

Wednesday, April 19, 2017

Display Numbers from 1 to 25 in a table with 5 elements in each Row in Visualforce Page.

Apex Class:
public class DisplayNumberController {
    Public List<List<Integer>> numberList {get;set;}
    public DisplayNumberController () {
        numberList = new List<List<Integer>>();
        List<Integer> rowList = new List<Integer>();
        for(integer i =1; i<=25; i++) {
            rowList.add(i);
            if(Math.Mod(i,5) ==0) {
                numberList.add(rowList);
                rowList = new List<Integer>();
            }
        }
        system.debug('DisplayNumbers:'+numberList);
    }
}
Visualforce Page:
<apex:page controller="DisplayNumberController">
<style>
h1 {
    color: red;
}
.grid-cell {
    width: 50px;
    height: 50px;
    border-radius: 3px;
    text-align:center;
    text-color:red;
    background: rgb(82, 128, 201);
}
</style>
<body>
<table border="1" cellpadding="0" cellspacing = "0">
<apex:repeat value="{!numberList}" var="rowNums">
<tr>
    <apex:repeat value="{!rowNums}" var="num">
        <td class="grid-cell"> <h1>{!num}</h1></td>
    </apex:repeat>
</tr>
</apex:repeat>
</table>
</body>
</apex:page>
Output:

No comments:

Post a Comment