• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 314
  • Last Modified:

how can I sync the table column width of 2 table

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
cstsang
Asked:
cstsang
  • 23
  • 20
  • 5
1 Solution
 
lil_puffballCommented:
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
 
RotaredoMCommented:
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
 
cstsangAuthor Commented:
hi lil_puffball :
I tested your code, it only work on IE.
How about netscape?
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
RotaredoMCommented:
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
 
cstsangAuthor Commented:
hi RotaredoM
0
 
cstsangAuthor Commented:
Dear RotaredoM :
Can you tell me which question?
0
 
RotaredoMCommented:
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
 
cstsangAuthor Commented:
RotaredoM:
Can you help me delete all question that without any reply?

0
 
RotaredoMCommented:
Done.

Please see revised list.

RotaredoM
CS Mod @ EE
0
 
lil_puffballCommented:
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
 
cstsangAuthor Commented:
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
 
RotaredoMCommented:
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
 
cstsangAuthor Commented:
lil_puffball:
It doesn't work.
0
 
lil_puffballCommented:
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
 
cstsangAuthor Commented:
ok
0
 
lil_puffballCommented:
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
 
cstsangAuthor Commented:
It works!
Both netscape 6 and 7 can display the words.
0
 
lil_puffballCommented:
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
 
cstsangAuthor Commented:
Sorry!
I need to sync. the column width with "2" table.
Not in 1 table
0
 
lil_puffballCommented:
Huh? Lost me there! Please explain...
0
 
cstsangAuthor Commented:
Your sample just work in 1 table case, not work in 2 table case.
0
 
lil_puffballCommented:
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
 
cstsangAuthor Commented:
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
 
lil_puffballCommented:
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
 
cstsangAuthor Commented:
Is it work in netscape 6 and 7?
0
 
lil_puffballCommented:
Tested it in IE6 and NS7. But it should work in IE5 and NS6 as well since these browsers are quite similar.
0
 
cstsangAuthor Commented:
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
 
lil_puffballCommented:
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
 
cstsangAuthor Commented:
yes
0
 
lil_puffballCommented:
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
 
cstsangAuthor Commented:
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
 
lil_puffballCommented:
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
 
cstsangAuthor Commented:
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
 
lil_puffballCommented:
Doesn't it work?
0
 
cstsangAuthor Commented:
I am using PC's netscape and IE to execute this.
It works fine.
0
 
lil_puffballCommented:
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
 
cstsangAuthor Commented:
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
 
cstsangAuthor Commented:
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
 
lil_puffballCommented:
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
 
cstsangAuthor Commented:
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
 
lil_puffballCommented:
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
 
lil_puffballCommented:
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
 
cstsangAuthor Commented:
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
 
lil_puffballCommented:
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
 
cstsangAuthor Commented:
how about the obj.borderWidth value?
I use this value to replace 10. However, it doesn't works (even *1).
0
 
lil_puffballCommented:
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
 
lil_puffballCommented:
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
 
cstsangAuthor Commented:
oh I C,
thank you very much.
0

Featured Post

[Webinar] Kill tickets & tabs using PowerShell

Are you tired of cycling through the same browser tabs everyday to close the same repetitive tickets? In this webinar JumpCloud will show how you can leverage RESTful APIs to build your own PowerShell modules to kill tickets & tabs using the PowerShell command Invoke-RestMethod.

  • 23
  • 20
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now