I have a list of items that I want to display in an HTML table. The list has "holes" though, that need to be filled in for it to display correctly (the x
and y
are the column and row in the table). I can't figure out where to even begin doing this.
<items>
<row y="1">
<item x="1" y="1" data="importantStuff1"/>
</row>
<row y="2">
<item x="2" y="2" data="importantStuff3"/>
</row>
<row y="3">
<item x="5" y="3" data="importantStuff1"/>
</row>
<row y="4">
<item x="3" y="4" data="importantStuff2"/>
<item x="4" y="4" data="importantStuff3"/>
</row>
</items>
What I need is the following:
<items>
<row y="1">
<item x="1" y="1" data="importantStuff1"/>
<item x="2" y="1" data="padding"/>
<item x="3" y="1" data="padding"/>
<item x="4" y="1" data="padding"/>
<item x="5" y="1" data="padding"/>
</row>
<row y="2">
<item x="1" y="2" data="padding"/>
<item x="2" y="2" data="importantStuff3"/>
<item x="3" y="2" data="padding"/>
<item x="4" y="2" data="padding"/>
<item x="5" y="2" data="padding"/>
</row>
<row y="3">
<item x="1" y="3" data="padding"/>
<item x="2" y="3" data="padding"/>
<item x="3" y="3" data="padding"/>
<item x="4" y="3" data="padding"/>
<item x="5" y="3" data="importantStuff1"/>
</row>
<row y="4">
<item x="1" y="4" data="padding"/>
<item x="2" y="4" data="padding"/>
<item x="3" y="4" data="importantStuff2"/>
<item x="4" y="4" data="importantStuff3"/>
<item x="5" y="4" data="padding"/>
</row>
</items>
How can I pad the list to look like this? The items are guaranteed to be ordered and I know how many items there are on each axis.
EDIT: I didn't realize the question could be interpreted as that I wanted a simple list. There is additional data in each item that makes it important to preserve the existing item nodes. So what I need is a way to create only the padding nodes and leave the existing ones as-is.
In order to create a minimal example to demonstrate my problem, I went a little overboard. Sorry about that.