calculating number of cells in a row

Harry · Aug 16, 2007

I have an html table with width 100%, one row, fixed-sized cells.
I would like to find out using javascript the maximal number of cells
possible in the row.
The solution (if one exists) needs to be cross-browser.

Anyone has any ideas ?

Thomas 'PointedEars' Lahn · Aug 16, 2007

Harry said:
I have an html table with width 100%, one row, fixed-sized cells.
I would like to find out using javascript the maximal number of cells
possible in the row.
The solution (if one exists) needs to be cross-browser.

Since not all browsers implement means to access the DOM that would be
required for the solution, you are out of luck.

Otherwise you have to specify "cross-browser".

PointedEars

josh · Aug 16, 2007

I have an html table with width 100%, one row, fixed-sized cells.
I would like to find out using javascript the maximal number of cells
possible in the row.
The solution (if one exists) needs to be cross-browser.

Anyone has any ideas ?

a cross-browser solution could be:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://
www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">
<html>
<head>
<title>no title</title>
<script type="text/javascript">

function nrCells(obj)
{
alert(obj.getElementsByTagName("td").length);
}

</script>

</head>
<body>
<table border="1">
<tr onclick="nrCells(this)">
<td>one</td>
<td>two</td>
<td>three</td>
<td>four</td>
</tr>
</table>
</body>
</html>

Bye

Thomas 'PointedEars' Lahn · Aug 16, 2007

josh said:
a cross-browser solution could be: ^^^^^^^^^^^^^^^^^^^^^^
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http:// ^^^^^^^^^^^^^^^
www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">
<html>
<head>
<title>no title</title>
<script type="text/javascript">

function nrCells(obj)
{
alert(obj.getElementsByTagName("td").length);

^^^^^^^^^^^^^^^^^^^^
YMMD.

PointedEars

Bart Van der Donck · Aug 16, 2007

Harry said:
I have an html table with width 100%, one row, fixed-sized cells.

I suppose you mean that every cell has a same fixed number of pixels.

I would like to find out using javascript the maximal number of
cells possible in the row.

This can't be known from the table itself; because 100% is always
relative to the parent element. E.g. suppose that you have a div of
80px width, a table of 100% width in it, and your cells must be 20px,
then you can have maximum 4 cells.

If you want to take the width of the browser window, then you could
do:

var winWidth, winHeight, d=document;
if (typeof window.innerWidth!='undefined') {
winWidth = window.innerWidth
} else {
if (d.documentElement &&
typeof d.documentElement.clientWidth!='undefined' &&
d.documentElement.clientWidth!=0) {
winWidth = d.documentElement.clientWidth
} else {
if (d.body &&
typeof d.body.clientWidth!='undefined') {
winWidth = d.body.clientWidth
}
}
}

var cell_width = 50 // fill in your cell pixels here
var max_cells = Math.floor(winWidth/cell_width)
document.write('You have room for max ' + max_cells + ' cells')

The solution (if one exists) needs to be cross-browser.

Okay.

Hope this helps,

Harry · Aug 17, 2007

Bart,

clientWidth does not include margin, border or scroll bar. offsetWidth
includes everything.
I would have liked to divide the clientWidth of the table by the
offsetWidth of the cell.
However, clientWidth also includes padding, which is a problem.
Maybe I can still use the clientWidth of the table if I substract the
padding from it?

The table and cells may have adornments such as borders, paddings and
margins,
as specified by CSS which may change at any moment.
Although the table is defined as 100%, this is only 100% of what's left
on the page.
By cross-browser I mostly mean firefox, IE6/7 and opera.

Is there a fool-proof method of calculating the maximal number of cells ?

Bart Van der Donck · Aug 17, 2007

Harry said:
clientWidth does not include margin, border or scroll bar. offsetWidth
includes everything.
I would have liked to divide the clientWidth of the table by the
offsetWidth of the cell.
However, clientWidth also includes padding, which is a problem.
Maybe I can still use the clientWidth of the table if I substract the
padding from it?

Yes I think this should normally work, since padding takes the pixels
on every side of the cell. If you have a padding of 2px, it should be
okay to add 4px to your initial cell width to perform the
calculations.

To make sure, I would set the padding in the CSS profile though and
not in <table cellpadding="...">.

Then, it is probably a good idea to use
<table border="0"> (set border in CSS if you want to use that)
and
<td style="overflow: hidden;">
and

The table and cells may have adornments such as borders, paddings and
margins,
as specified by CSS which may change at any moment.
Although the table is defined as 100%, this is only 100% of what's left
on the page.
By cross-browser I mostly mean firefox, IE6/7 and opera.

Is there a fool-proof method of calculating the maximal number of cells ?

I think you should first define which CSS rules you want to use, e.g.

padding
border-left
border-spacing

And then make sure to include those rules in the calculations where
needed. And if you then always use px inside CSS, I think your plan
should be workable.

Sort by number of characters	1	Nov 2, 2023
Sort by number of characters	0	Nov 3, 2023
How do I use Find and Loop in VBA for Excel to identify, delete, and insert blank row for values greater than 6?	0	Feb 28, 2022
Cell click reveals row number	7	Jul 5, 2006
Calculating Percentages in VHDL?	3	Jan 22, 2014
Data saving in condition of changing reality	0	Apr 29, 2022
dynamically adding a row to a table (portability issue)	7	Dec 15, 2009
How to Create a random password generator in a separate window	4	May 26, 2022

calculating number of cells in a row

Harry

Thomas 'PointedEars' Lahn

josh

Thomas 'PointedEars' Lahn

Bart Van der Donck

Harry

Bart Van der Donck

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads