Changing the design of Newform and Editform using javascript

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() {  
  2.   
  3. TablifyFields("FirstName""BusinessUnit");  
  4.   
  5. });  
  6.   
  7. function TablifyFields(fromField, toField)  
  8. {  
  9.     jQuery(SPUtility.GetSPField(fromField).LabelRow).parent().css("display","block");  
  10.       
  11.     var fromIndex = jQuery(SPUtility.GetSPField(fromField).LabelRow).index();  
  12.     var toIndex = jQuery(SPUtility.GetSPField(toField).LabelRow).index();  
  13.       
  14.     var rowwidth = jQuery(SPUtility.GetSPField(fromField).LabelRow).parent().width();  
  15.     var trWidth = parseInt(rowwidth)/2 + "px";  
  16.   
  17.     var tdwidth  = jQuery(SPUtility.GetSPField(fromField).LabelRow).children().eq(0).width();  
  18.     var tdWidth = parseInt(rowwidth)/2 - parseInt(tdwidth);   
  19.       
  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.     });  
  27.       
  28. }  
  29.   
  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: