Click here to Skip to main content
15,867,330 members
Articles / Web Development / HTML
Tip/Trick

Write a New Table Row Every Nth Column

Rate me:
Please Sign up or sign in to vote.
5.00/5 (2 votes)
24 Jan 2016CPOL 10.4K   3  
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

JavaScript
/// 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, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior)
United States United States
My mother had the foresight to buy me my first computer programming book, 1001 Basic Programs, when I was in high school (1985). I had no idea what I was doing (maybe still don't) but I typed them all into my IBM XT: A programmer was born. I haven't looked back since.

Along the way I became a semi-pro drummer.

Along the way I found my favorite human being on the planet and married her.

Life is great. I'm livin' the dream. I hope you are too. Code Project is a huge part of my success. I am grateful to all of you have contributed and posted over the past decade.

Bless you all.

Comments and Discussions

 
-- There are no messages in this forum --