Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #41281

DOM manipulation of table and img objects

Show all headers | View raw

Hello,

I have a basic triple-row table with some simple HTML attributes:

<table width="100%" border="1">

<tr><td height="10%" align="center">

<img src="logo.jpg">

</td>

</tr><tr>

<td align="center">

<img src="visual.jpg">

</td></tr>

<tr><td height="10%" align="center">

footer

</td></tr></table>

I would like to change the structure by a function that does the following:

Table re-structure:
* Change the table from three to two rows and with two columns in the first 
row (as if simply removing the first instance of the "</tr><tr>" html code).
* Add colspan="2" in table cell of last row.

Remove and add html attributes of first table cell and row:
* Remove html height attribute.
* Add html width attribute of 50%.

Swap image locations between cells:
* Remove logo.jpg in first cell.
* Add visual.jpg in first cell.
* Remove visual.jpg in second cell.
* Add logo.jpg in second cell.

I'm not sure how the above may best be done and in which order etc. Would it 
be better to re-render the complete table and it's contents or can the 
structure/positioning of the few elements easily be modified as above?

And I would like to reverse the process, by having a function calling each 
display: 

function dual_row(){
...
}

function triple_row(){
...
}

Either function can then be called depending on the initial width of the 
client or window size, on resize etc.

Different from the triple-row, the dual-row version would appear as:

<table width="100%" border="1">

<tr><td width="50%" align="center">

<img src="visual.jpg">

</td>

<td align="center">

<img src="logo.jpg">

</td></tr>

<tr><td colspan="2" height="10%" align="center">

footer

</td></tr></table>

Many thanks for any ideas.

Tuxedo

Back to comp.lang.javascript | Previous | Next — Next in thread | Find similar | Unroll thread

Thread

DOM manipulation of table and img objects Tuxedo <tuxedo@mailinator.net> - 2023-04-17 13:42 +0200
  Re: DOM manipulation of table and img objects Janis Papanagnou <janis_papanagnou+ng@hotmail.com> - 2023-04-17 14:27 +0200
    Re: DOM manipulation of table and img objects The Natural Philosopher <tnp@invalid.invalid> - 2023-04-17 15:43 +0100
    Re: DOM manipulation of table and img objects Tuxedo <tuxedo@mailinator.net> - 2023-04-18 04:55 +0200
      Re: DOM manipulation of table and img objects Janis Papanagnou <janis_papanagnou+ng@hotmail.com> - 2023-04-18 06:28 +0200
        [OT] Responsive design (was Re: DOM manipulation of table and img objects) Janis Papanagnou <janis_papanagnou+ng@hotmail.com> - 2023-04-18 06:38 +0200
        Re: DOM manipulation of table and img objects Tuxedo <tuxedo@mailinator.net> - 2023-04-18 20:10 +0200

csiph-web