Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

Write a New Table Row Every Nth Column

0.00/5 (No votes)
24 Jan 2016 1  
Dynamically write a new row every Nth columns

Introduction

For a while now, I've been using various bootstrap/responsive CSS templates. I recently was on a project where I wanted to create a new row of <div class="col-md-3"> for every four database records. I'm using LINQ and ENTITY framework for the data layer. First, I wanted to figure out my algorithm in POJS (Plain Old Java Script).

Below is my process:

First, I wrote the logging in POJS. The provided examples will demonstrate a variety of JS looping mechansims. Then, I'll include my C#/MVC code snippet.

The Code

/// For Loop Demo

  // This is the demo data set. Eventually this array will be repaced by Entity Framework
    var arr = ['Morkie', 'Shitzu', 'Collie', 
    'Mutt', 'Golden', 'Yellow Lab', 'Labradoodle'];
    var totalRecords = arr.length;
    var nthCol = 4 // nthCol is how many column you want per row
      
    var totalRows = totalRecords/nthCol ;
        
    var html = "<style>table, th, 
    td {border: 1px solid black; border-collapse: collapse;}</style>"
    html += "<table>";
    
    for(var curCol = 1; curCol <= totalRecords ; curCol ++){
                   
       if (curCol % nthCol == 1) {
        html += "<tr>";
       }
       
       html += "<td>" + arr[curCol-1] + "</td>";
       
       if (curCol %nthCol == 0) {
            html += "</tr>"
       }       
    }
    
    html += "<table>";
    
    document.writeln(html);

/// Same Demo Using a While Loop

    var arr = ['Morkie','Shitzu', 'Collie', 
    'Mutt', 'Golden', 'Yellow Lab', 'Labradoodle'];
    var totalRecords = arr.length;
    var nthCol = 4
    var curCol = 1;  
    var totalRows = totalRecords/nthCol ;    
    
    var html = "<style>table, th, 
    td {border: 1px solid black; border-collapse: collapse;}</style>"
    html += "<table>";
    
    while( curCol <= totalRecords ){       
              
       if (curCol % nthCol == 1) {
        html += "<tr>";
       }
       
       html += "<td>" + arr[curCol-1] + "</td>";
       
       if (curCol %nthCol == 0) {
            html += "</tr>"
       }
       curCol ++ ;
    }
    
    html += "<table>";
    
    document.writeln(html);

/// Same Demo Using For In Loop

    var arr = ['Morkie','Shitzu', 'Collie', 
    'Mutt', 'Golden', 'Yellow Lab', 'Labradoodle'];
    var totalRecords = arr.length;
    var nthCol = 4

    var totalRows = totalRecords/nthCol ;     
    
    var html = "<style>table, th, 
    td {border: 1px solid black; border-collapse: collapse;}</style>"
    html += "<table>" ;
    
    for(var curCol in arr){
                
        if (curCol % nthCol == 0) {
            html += "<tr>";
        }
        
        html += "<td>" + arr[curCol] + "</td>";
        
        if(curCol % nthCol == 3){
            html += "</tr>";
        }        
    }
    
    html += "</table>";
    document.writeln(html);

/// Same Demo Using C#, EF, and a Bootstrap Theme

using (Data_Context ctx = new Data_Context())
            {
                var faqs = (from faq in ctx.FAQs where faq.IsActive == true select faq).ToList();

                var totalRecords = faqs.Count;
                var nthCol = 4;
                var curCol = 1;
                while(curCol <= totalRecords)
                {
                    //begin row
                    if(curCol % nthCol == 1){ html += "<div class='row wow fadeInLeft animated' 
                    data-wow-offset='30' data-wow-duration='1.5s' 
                    data-wow-delay='0.15s'>"; }

                    //write column data
                    html += String.Format(@"
                <div class='col-md-3'>
                        <div class='item item-1'>
                        <div class='item-overlay'>
                        </div>
                        <div class='item-content'>
                            <div class='item-top-content'>
                                <div class='item-top-content-inner'>
                                    <div class='item-product'>
                                        <div class='item-top-title'><h5>
                                        Question</h5>
                                        <p class='subdescription'>{0}</p></div>
                                    </div>
                                </div>
                            </div>
                            <!-- ITEM HOVER CONTENT-->
                            <div class='item-add-content'>
                                <div class='item-add-content-inner'>
                                    <div class='section'><p>Answer</p></div>
                                    <div class='section'>
                                        <button type = 'button' 
                                        class='btn btn-primary custom-button green-btn' 
                                        data-toggle='modal' 
                                        data-target='#mod{1}'>Answer</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>",faqs[curCol-1].Question,curCol);

                    //close row
                    if(curCol %nthCol == 0) { html += "</div>"; }

                    curCol++;
                }
            }

            return MvcHtmlString.Create(html);
        }

History

  • 24th January, 2016: Initial version

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here