?
Solved

how can I sync the table column width of 2 table

Posted on 2003-03-22
48
Medium Priority
?
312 Views
Last Modified: 2010-05-18
I have 2 table.
Can you give me some example code on sync. the table column width of this 2 table?
or
can you give some example code for on changing table column width dynamically in the NS7,NS6, and (IE 5.x or above) browser?



0
Comment
Question by:cstsang
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 23
  • 20
  • 5
48 Comments
 
LVL 12

Expert Comment

by:lil_puffball
ID: 8186336
It is possible to change the column/row width/height. First you have to give the cell an ID. e.g. <td id="cell">
Then, change it like this:

function change()
{
var cell=document.getElementById('cell');
cell.setAttribute("width",#);
cell.setAttribute("height",#);
}
0
 

Expert Comment

by:RotaredoM
ID: 8186358
cstsang,

It seems that you have forgotten to resolve some of your old questions.

Please follow http://www.experts-exchange.com/memberProfile.jsp?mbr=cstsang (your profile) for a complete list of UnlockedQ questions.

I also advise that you take the time to read: http://www.experts-exchange.com/Community_Support/New_to_EE/Q_20310437.html

If you need any assistance to resolve, please email me to RotaredoM -at- Experts-Exchange.com.

Thank you,

RotaredoM
Community Support Moderator @ Experts-Exchange

0
 
LVL 7

Author Comment

by:cstsang
ID: 8188492
hi lil_puffball :
I tested your code, it only work on IE.
How about netscape?
0
Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

 

Expert Comment

by:RotaredoM
ID: 8188533
cstsang,

How about resolving your old questions first?

Please note that if all opened questions older than a month aren't handled within 72 hours, I have an obligation to give your account to administration. If you have questions on how to handle them, please drop a note here and I'm happy to assist.

RotaredoM
Community Support Moderator @ Experts-Exchange
0
 
LVL 7

Author Comment

by:cstsang
ID: 8188848
hi RotaredoM
0
 
LVL 7

Author Comment

by:cstsang
ID: 8188850
Dear RotaredoM :
Can you tell me which question?
0
 

Expert Comment

by:RotaredoM
ID: 8189594
cstsang,

Graphics General TA:
http://www.experts-exchange.com/Q_20299841.html Date: 05/12/2002 08:39PM PST
http://www.experts-exchange.com/Q_20202235.html Date: 10/22/2001 08:40PM PST

Java Programming TA:
http://www.experts-exchange.com/Q_20369212.html Date: 10/05/2002 07:03AM PST
http://www.experts-exchange.com/Q_20368600.html Date: 10/03/2002 09:26PM PST - Deleted
http://www.experts-exchange.com/Q_20333775.html Date: 08/06/2002 09:38PM PST
http://www.experts-exchange.com/Q_20255676.html Date: 01/15/2002 06:54PM PST
http://www.experts-exchange.com/Q_20226705.html Date: 11/05/2001 01:45AM PST

Perl TA:
http://www.experts-exchange.com/Q_20150364.html Date: 07/13/2001 04:35AM PST

Linux Networking TA:
http://www.experts-exchange.com/Q_20146081.html Date: 07/05/2001 01:57AM PST

Linux Printing TA:
http://www.experts-exchange.com/Q_20321625.html Date: 07/10/2002 05:16AM PST - Deleted

JSP TA:
http://www.experts-exchange.com/Q_20394607.html Date: 11/10/2002 03:15AM PST

PHP and Databases TA:
http://www.experts-exchange.com/Q_20488704.html Date: 01/29/2003 08:27PM PST

Please note that you are obliged to be active in your questions and resolve them, one way or another. If you think that the information supplied in a question is not sufficient to you, then you should:
1) Post a request for the participating expert to supply more information.
2) If the above did not help, post a comment that you are about to ask Community Support to delete the question, and let the experts 72 hrs to reply.
3) If you still didn't get sufficient information to solve your problem, then you should post a 0 (zero) points question at Community Support http://www.experts-exchange.com/Community_Support/ asking to delete the question. The link to Community Support is located at the menu to the left of your screen as well. In any post that you make at CS, please add the link to the question to be resolved.

Other links that you may find helpful:
HelpDesk: http://www.Experts-exchange.com/jsp/cmtyHelpDesk.jsp
Community Q & A: http://www.Experts-exchange.com/jsp/cmtyQuestAnswer.jsp
Member Agreement: http://www.Experts-exchange.com/jsp/infoMemberAgreement.jsp
What's New: http://www.Experts-exchange.com/jsp/infoWhatsNew.jsp

If you have any questions, please don't hesitate to post a 0 (zero) points question at CS, and we'll be happy to assist.

RotaredoM
Community Support Moderator @ Experts Exchange
0
 
LVL 7

Author Comment

by:cstsang
ID: 8189923
RotaredoM:
Can you help me delete all question that without any reply?

0
 

Expert Comment

by:RotaredoM
ID: 8189955
Done.

Please see revised list.

RotaredoM
CS Mod @ EE
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 8190626
cstsang,
Not sure about netscape since I don't have it, you might want to try this though:

function change()
{
if(document.layers){cell=document.layers['cell'];}
else{cell=document.getElementById('cell'}
cell.setAttribute("width",#);
cell.setAttribute("height",#);
}

Let me know if it doesn't work.
0
 
LVL 7

Author Comment

by:cstsang
ID: 8200866
RotaredoM :
Can you tell me how I delete the question that I haven't got the answer?

It is because most of my unlocked questions were NOT provide me a  suitable answer.
0
 

Expert Comment

by:RotaredoM
ID: 8206727
cstsang,

In each question that you want to delete, You should post a comment with your intention to do so, explaining why you want to delete and let the participating experts 72 Hrs to respond. If no objections are made within the time frame, then you should post a request at the Community Support (add the link to the question to be deleted), and a moderator will finilize it for you.

This is a technichal Topic Area. Please keep the posts here focused on the subject in question.

Expert lil_puffball is trying to help you resolve this question, hence I suggest that you collaborate his her/him in this thread and reply to the comments posted

For any further administrative issues (like help with resolving your other questions), you should post a 0 (zero) points question at Community Support Topic Area http://www.experts-exchange.com/Community_Support/ . The link to Community Support is located at the menu to the left of your screen as well. In any post that you make at CS, please add the link to the question to be resolved.

Thank you,

RotaredoM
CS Mod @ EE
0
 
LVL 7

Author Comment

by:cstsang
ID: 8222090
lil_puffball:
It doesn't work.
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 8222235
Well, you could also put the table in a table and change the innerHTML of that table. However this will get a lot more complex. Do you want me to try and put together a script?
0
 
LVL 7

Author Comment

by:cstsang
ID: 8222244
ok
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 8227751
Or you can try:

function change()
{
var cell=document.getElementById('cell');
cell.style.width=#;
cell.style.height=#;
}


The problem is I don't have netscape so I'm not sure whether it doesn't support getElementById or setAttribute.
Anyways, try this example code to determine if netscape supports getElementByID or not:

<span id='test'>This is some text</span>
<button onClick="alert(document.getElementById('test').innerHTML)">Click</button>

If the netscape supports getELementById then an alert should pop up with "This is some text" on it when you click the button. If it throws an error let me know.
0
 
LVL 7

Author Comment

by:cstsang
ID: 8266099
It works!
Both netscape 6 and 7 can display the words.
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 8266777
cstang,
I just downloaded NS7 and it works perfectly fine. Try this code:

<script>
function chg(){
obj=document.getElementById('c1');
obj.setAttribute("width","50%")
}
</script>

<table border='1' width='70%'><tr>
<td id='c1' width='30%'>Text in cell1</td>
<td>Text in cell2</td>
</tr></table>
<a href="#" onClick="chg()">Click to change</a>
0
 
LVL 7

Author Comment

by:cstsang
ID: 8267248
Sorry!
I need to sync. the column width with "2" table.
Not in 1 table
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 8272582
Huh? Lost me there! Please explain...
0
 
LVL 7

Author Comment

by:cstsang
ID: 8278066
Your sample just work in 1 table case, not work in 2 table case.
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 8278506
No, I don't know what you mean about 2 tables. So, they are side by side, on top of each other??? And the columns in the table must be the same when you click a button?

Please specify, e.g. one table with 2 columns, another with 2 columns, when I click a button the left row in the 1st table becomes 70% and the right row in the second table also becomes 70%...
0
 
LVL 7

Author Comment

by:cstsang
ID: 8280465
I have 2 tables.table 1 is on top of table 2.
for example,
table 1 have 2 column and table 2 have 1 column.
Well! you click the button the column width of table 2 column 1 will equal to that of table 1 column 1 .
that is my requirment.
Something like this:
|----------|----------|
|          |          |  table 1 have 2 column
|----------|----------|

|----------------|
|                |    table 2 have 1 column
|----------------|

when you click the button

|----------|----------|
|          |          |  table 1
|----------|----------|

|----------|
|          | table 2
|----------|
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 8295202
This works for me:

<table width=500 border=1><tr>
<td width=300 id='t1c1'>Table1,Cell1</td><td>Table1,Cell2</td>
</tr></table>

<table border=1><tr>
<td width=500 id='t2c1'>Table2,Cell1</td>
</tr></table>

<input type='button' onClick="document.getElementById('t2c1').setAttribute('width',document.getElementById('t1c1').width);" value='Align'>
0
 
LVL 7

Author Comment

by:cstsang
ID: 8296237
Is it work in netscape 6 and 7?
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 8303513
Tested it in IE6 and NS7. But it should work in IE5 and NS6 as well since these browsers are quite similar.
0
 
LVL 7

Author Comment

by:cstsang
ID: 8324707
Your work fine!But
how about?
|----------|----------|
|          |          |  table 1 have 2 column
|----------|----------|

|----------------|
|abc             |    table 2 have 1 column
|----------------|
|abcdefghijklmnop|  
|----------------|


when you click the button

|----------|----------|
|          |          |  table 1
|----------|----------|

|----------|
|abc       | table 2
|----------|
|abcdefgh  |
|ijklmnop  |
|----------|

It is because your code doesn't work in this case.

0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 8329262
So you mean your problem is if the cell has text that is too long, and you want it to wrap but it doesn't?
0
 
LVL 7

Author Comment

by:cstsang
ID: 8330187
yes
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 8330405
But I tried it successfully:

<table width=500 border=1><tr>
<td width=300 id='t1c1'>Table1,Cell1</td><td>Table1,Cell2 text text text text text text text text text text text text text text text</td>
</tr></table>

<table border=1><tr>
<td width=500 id='t2c1'>Table2,Cell1</td>
</tr></table>

<input type='button' onClick="document.getElementById('t2c1').setAttribute('width',document.getElementById('t1c1').width);" value='Align'>
0
 
LVL 7

Author Comment

by:cstsang
ID: 8331340
oh! sorry,
the HTML code should be:
<table width=500 border=1><tr>
<td width=300 id='t1c1'>Table1,Cell1</td><td>Table1,Cell2</td>
</tr></table>

<table border=1>
<tr>
   <td width=500 id='t2c1'>Table2,Cell1</td>
</tr>
<tr>
<td>Table1,Cell2 text text text text text text text text t text text text text text text</td>
</tr>
</table>



0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 8350982
sorry, my mistake. I did mean to do it your way. But it's working fine for me, could you post it somewhere so I could have a look? btw are you using windows or mac?
0
 
LVL 7

Author Comment

by:cstsang
ID: 8352357
The following code is 95% of my idea,BUT NOT 100%

<html>
<body>
<table width=500 border=1><tr>
<td id='t1c1'>Table1,Cell1</td><td>sdfsdfdsfsf</td>
</tr></table>

<table border=1 id='t2c1'>
<tr>
    <td >Table2,Cell1</td>
</tr>
<tr>
   <td>Table1,Cell2 text text text text text text text text text text text text text text text</td>
</tr>
</table>

<input type='button' onClick="document.getElementById('t2c1').setAttribute('width',document.getElementById('t1c1').offsetWidth);" value='Align'>
</body>
</html>

0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 8356835
Doesn't it work?
0
 
LVL 7

Author Comment

by:cstsang
ID: 8358374
I am using PC's netscape and IE to execute this.
It works fine.
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 8358963
So what is malfunctioning right now? You said "The following code is 95% of my idea,BUT NOT 100%", so what's the missing 5%?
0
 
LVL 7

Author Comment

by:cstsang
ID: 8370887
The width of second table changed,however ,the width of second table still not equal to the column's 1 width of table 1.

Also, can you tell me which version of IE and netscape your are using ?

I am using PC version's IE6.0 ,Netscape 6.2 and netscape 7.0.
The above script give me the same result.
0
 
LVL 7

Author Comment

by:cstsang
ID: 8370990
That is what I see before I click the button:

http://www16.brinkster.com/cstsang/before.jpg

When I click the button, the following screen will be shown:

http://www16.brinkster.com/cstsang/after.jpg

0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 8376188
sorry, it says "HTTP1.1 STATUS 403 Remote Access to this object forbidden This file cannot be directly accessed from a remote site, but must be linked through the Brinkster Member's site. "
0
 
LVL 7

Author Comment

by:cstsang
ID: 8377037
Sorry!That is web hosting problem.I have fixed this problem.
You should know my what I see by browsing the following URL:
http://www16.brinkster.com/cstsang/index.htm
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 8383323
Hmm, I see what you mean--the columns aren't exactly lined up. Anyways I'll look into that issue and get back to you...
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 8383431
The problem is that the table cell width is not taking into account the borders. So you'll have to add double the border width (10px in this case):

<table width=500 border=1><tr>
<td width=300 id='t1c1'>Table1,Cell1</td><td>Table1,Cell2</td>
</tr></table>

<table border=1 width=500 id='t2c1'>
<tr><td width=500>Table2,Cell1</td>
</tr><tr>
<td width=500>
Table1,Cell2 text text text text text text text text t text text text text text text
</td></tr>
</table>


<input type='button' onClick="var obj=document.getElementById('t1c1');document.getElementById('t2c1').setAttribute('width',obj.width*1+10);" value='Align'>
0
 
LVL 7

Author Comment

by:cstsang
ID: 8448639
Can you tell me why?
"obj.width*1+10",
I have tried that to change it to "obj.width+10",
however it cannot work again, can you tell me why?
0
 
LVL 12

Accepted Solution

by:
lil_puffball earned 500 total points
ID: 8450174
You must use the *1 because currently obj.width is a string, not an number. For example:

Let's say the width is 100.

When you do obj.width+10, it becomes 10010 rather than 110 because it is a string.

However, when you multiply by 1, it automatically get converted to a number because you cannot multiply strings.

Test this to see what I mean:

<script>
var num="100"
var answer=num+10
alert("Now num is a string so num+10 becomes 10010: "+ans)
num=100
answer=num+10
alert("Now it's a number so num+10 becomes 110: "+ans)
</script>
0
 
LVL 7

Author Comment

by:cstsang
ID: 8450228
how about the obj.borderWidth value?
I use this value to replace 10. However, it doesn't works (even *1).
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 8450247
This is because it is not defined through style, plus obj is the table cell not the table itself.

To find the table border you'd have to use this:

obj.offsetParent.border instead of 10.
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 8450260
obj.offsetParent basically refers to it's 'parent', in the case of a table cell it's parent is the table. Then we find the border of the table.

Keep in mind we do not use obj.offsetParent.borderWidth because borderWidth is only used in <style>. If you wanted to use style, e.g. <table style="border:red 3 px solid">

you would use obj.offsetParent.style.borderWidth but if you're using <table border=3> you would simple use .border.

Hope this clears up some things. :)
0
 
LVL 7

Author Comment

by:cstsang
ID: 8451776
oh I C,
thank you very much.
0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question