...

View Full Version : Determining pixel length of row



bauhsoj
08-20-2005, 07:00 PM
How could I use JavaScript to determine the pixel length of a specific column in a specific row that has a percentage width?

For instance:
<table cellpadding="1" cellspacing="1">
<tr>
<td width="25%">something</td>
<td width="50%">something else</td>
<td width="5%">text</td>
<td width="20%">yet more text</td>
</tr>
</table>

How could I tell how far across the browser page each table column had stretched measured in pixels?

Mr J
08-20-2005, 09:33 PM
Try this


<script type="text/javascript">
<!--
function myWidth(cell){
cellWidth=cell.offsetWidth+"px"
alert(cellWidth)
}
//-->
</script>


<table cellpadding="1" cellspacing="1" border="1">
<tr>
<td width="25%" onclick="myWidth(this)">something</td>
<td width="50%" onclick="myWidth(this)">something else</td>
<td width="5%" onclick="myWidth(this)">text</td>
<td width="20%" onclick="myWidth(this)">yet more text</td>
</tr>
</table>

Just thought, you will also have to take into account the cellpadding and cellspacing so you'd have to go something like this.


<script type="text/javascript">
<!--
onload=function myWidth(){

tdCell=document.getElementById("mytable").getElementsByTagName("TD")

padding=document.getElementById("mytable").cellPadding
spacing=document.getElementById("mytable").cellSpacing

spadding=(spacing*1+padding*1)*2

for(i=0;i<tdCell.length;i++){
alert("The width of cell "+(i+1)+" is "+(tdCell[i].offsetWidth-spadding))
}

}
//-->
</script>


<table id="mytable" cellpadding="1" cellspacing="1" border="1">
<tr>
<td width="25%">something</td>
<td width="50%">something else</td>
<td width="5%">text</td>
<td width="20%">yet more text</td>
</tr>
</table>

bauhsoj
08-21-2005, 01:19 AM
That's disturbingly simple. :thumbsup:

I had envisioned some various convoluted methods to solve this problem. Glad I waited on a response to this post before plowing through my way. :D

bauhsoj
08-21-2005, 02:40 AM
Now I have one additional problem.

What is the ratio relationship between the "width" attribute of a table column and the "size" attribute of an input text field? I am trying to get an input field to dynamically stretch the length of a rendered table.

I got close to a ratio of 1/6 but still can't seem to fine-tune it just right so that the input text field fits exactly into the table column.

Mr J
08-21-2005, 04:54 PM
You need to go something like

textInput.style.width = column.offsetWidth

bauhsoj
08-21-2005, 07:16 PM
textInput.style.width = column.offsetWidth

I tried that but strangely enough the width doesn't change. Just to see the effect I added that to an onFocus attribute so that when I clicked on the field it would expand to the width of the column. There were no javascript errors or warning generated at all. Nothing happens.

Here is the code I am testing it with:
<table>
<tr><td>text</td><td>more text</td></tr>
<tr>
<td colspan="2" id="td_field">
<input id="field" maxlength="255" name="field" type="text"
onFocus="this.style.width = document.getElementById('td_field').offsetWidth"
/>
</td>
</tr>
</table>

This is being tested in Firefox 1.0.6.

Thanks for your help thus far.

Mr J
08-21-2005, 09:55 PM
Nothing happened because it is already the width of the table

Try this example


<table border="1" width="100%">
<tr><td>text</td><td>more text</td></tr>
<tr>
<td colspan="2" id="td_field">
<input id="field" maxlength="255" name="field" type="text" onFocus="this.style.width = document.getElementById('td_field').offsetWidth">
</td>
</tr>
</table>

glenngv
08-22-2005, 01:17 PM
You can just set the width of the textbox to 100% to fit it exactly in the cell.

<td colspan="2" id="td_field">
<input id="field" maxlength="255" name="field" type="text" style="width:100%" />
</td>

bauhsoj
08-24-2005, 09:10 PM
You can just set the width of the textbox to 100% to fit it exactly in the cell.

That seems to be the easiest way to solve the problem. :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum