Introduction

This blog shows how to convert the default table structure of newform and editform into a 2x2 matrix based table
Required JS File
  1. Latest jQuery library
  2. Latest SPUtility.js file from codeplex
Default New Form
Steps
  1. Open the Newform.aspx for a list and click on Edit Page
  2. Add a Content Editor Web part and add the <script src> for the above two JS files3.
  3. Add the below code snippet
  1. jQuery(document).ready(function() {
  3. TablifyFields("FirstName", "BusinessUnit");
  5. });
  7. function TablifyFields(fromField, toField)
  8. {
  9. jQuery(SPUtility.GetSPField(fromField).LabelRow).parent().css("display","block");
  11. var fromIndex = jQuery(SPUtility.GetSPField(fromField).LabelRow).index();
  12. var toIndex = jQuery(SPUtility.GetSPField(toField).LabelRow).index();
  14. var rowwidth = jQuery(SPUtility.GetSPField(fromField).LabelRow).parent().width();
  15. var trWidth = parseInt(rowwidth)/2 + "px";
  17. var tdwidth = jQuery(SPUtility.GetSPField(fromField).LabelRow).children().eq(0).width();
  18. var tdWidth = parseInt(rowwidth)/2 - parseInt(tdwidth);
  20. var tBody = jQuery(SPUtility.GetSPField(fromField).LabelRow).parent().children();
  21. jQuery.each(tBody,function(index, value){
  22. if(index >= fromIndex && index <=toIndex)
  23. {
  24. ModifyFieldPosition(value, trWidth, tdWidth);
  25. }
  26. });
  28. }
  30. function ModifyFieldPosition(fieldtr, trwidth, tdwidth)
  31. {
  32. jQuery(fieldtr).css("float","left");
  33. jQuery(fieldtr).css("width",trwidth);
  34. jQuery(fieldtr).children().eq(1).css("width",tdwidth+"px");
  35. var firsttdWidth = jQuery(fieldtr).children().eq(0).attr("width").replace("px","");
  36. var inputWidth = jQuery(fieldtr).children().eq(1).children().children().width();
  37. jQuery(fieldtr).children().eq(0).css("width",90/100*(parseInt(firsttdWidth))+"px");
  38. if(parseInt(inputWidth)>parseInt(tdwidth))
  39. {
  40. jQuery(fieldtr).children().eq(1).children().children().css("width",tdwidth+"px");
  41. }
  42. }
Voila ! Customized New Form: