HTML Column Merging

Question

I had  question regarding HTML column merging. I have a constructed list with multiple rows and columns and i would like to merge the columns together but it separated as different columns .


For example - i want the view to be like this

             Year                                               Month
Holidays        Salary             Holiday                 Salary


Currently my View is

Year                       Year
Holiday                 Salary

Answer 1

This may not be the best or most up to date solution but it may suit your needs?

Create a parent list with the following codes defined ...

1-Holidays
2-Salary
3-Holidays
4-Salary

Create a grid question with the columns using the above mentioned parent list. The rows will use a single row blank list.

Set the grid direction to rows.

Set your input type - radio button / check boxes / numeric / etc.

Pop this JavaScript into the footer of your grid question ...

<script>
$(document).ready(function()
{
 row_html = "<tr></td><td align='center' colspan='2'>Year</td><td align='center' colspan='2'>Month</td></tr>";
 $(".column_header_row").before(row_html);
});
</script>

Good luck.

Comments

That about sums up the code I was about to write.  The one thing I would add would be to put "<td>" between "<tr>" and "</td>."  The code may run without it, but it's good practice to make sure every opening and closing tag match up.

---

Thanks Zachary. I noticed the tag issue and corrected it in my ssi file but had forgotten to attend to it on the forum.

Corrected script ...

<script>
$(document).ready(function()
{
 row_html = "<tr><td align='center' colspan='2'>Year</td><td align='center' colspan='2'>Month</td></tr>";
 $(".column_header_row").before(row_html);
});
</script>