CODEWITHSUNDEEP
javascripthtmlhtml-table
user3156931
user3156931

Reputation: 15

set limit for the number of columns per row in a html table

May I know what are the ways to limit the number of columns of a Html table (e.g. 3 columns per row)?

FYI, I'm using row.insertCell() to add cells to a particular row with matching the row id. I wish to limit the cell number to only 3 per row in the table.

Upvotes: 0

Views: 9629

Answers (4)

Mohit
Mohit

Reputation: 2249

There is no such limit in the javascript or html standard. you have to enforce it yourself as a rule during the insertion.

A simple counter does the trick.

var items = ['c00', 'c01', 'c02', 'c10', 'c11', 'c12'];  //sample data

var table = document.getElementById("myTable");
var row;

for(var i = 0; i < items.length; i++){
  if(i % 3 == 0) {   //after every third cell add a new row and change the row variable to point to it
     row = table.insertRow(-1);      
  }
  var cell = row.insertCell(-1);  //simply insert the row
  cell.innerHTML = items[i];
}

there are a number of ways of doing it. it will really depend on how you structure your code.

Upvotes: 0

Teemu
Teemu

Reputation: 23416

Use row.cells collection to check, how many cells a row contains.

var row = document.getElementById('row_id'),
    cells = row.cells, max = 3;
if (cells.length < max) {
    // Add cell(s) to #row_id
}

Upvotes: 1

Mudassir Hasan
Mudassir Hasan

Reputation: 28771

for(i=0;i<3;i++)
row.insertCell()

Upvotes: 0

Madara&#39;s Ghost
Madara&#39;s Ghost

Reputation: 175098

"Limit"? There's no natural limit. You'll have to enforce it yourself on your own code.

Check if the row you're inserting into already has 3 cells, and don't add a new one if it does.

Upvotes: 1

Related Questions