DOM manipulation of table and img objects

Path	csiph.com!weretis.net!feeder8.news.weretis.net!reader5.news.weretis.net!news.solani.org!.POSTED!not-for-mail
From	Tuxedo <tuxedo@mailinator.net>
Newsgroups	comp.lang.javascript
Subject	DOM manipulation of table and img objects
Date	Mon, 17 Apr 2023 13:42:21 +0200
Lines	85
Message-ID	<u1jbu0$3jbak$1@solani.org> (permalink)
Mime-Version	1.0
Content-Type	text/plain; charset="ISO-8859-1"
Content-Transfer-Encoding	7Bit
Injection-Date	Mon, 17 Apr 2023 11:52:33 -0000 (UTC)
Injection-Info	solani.org; logging-data="3779924"; mail-complaints-to="abuse@news.solani.org"
User-Agent	KNode/4.14.10
Cancel-Lock	sha1:M8ZAqbygPGmSvw33L/ytvm0ok0E=
X-User-ID	eJwFwYEBwCAIA7CXhlKUc6jQ/09Ygh0W73ggHIIedaqTa02oi0N1YoDySdKu1+M31ul3tvQDUnwS6A==
Xref	csiph.com comp.lang.javascript:41281

Show key headers only | 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