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

Groups > comp.lang.javascript > #41284

Re: DOM manipulation of table and img objects

Show key headers only | View raw

Janis Papanagnou wrote:

> Hello Tuxedo
> 
> On 17.04.2023 13:42, Tuxedo wrote:
>> 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>
>> 
> 
> First I want to reformat your two desired HTML formats to a hierarchical
> format that better resembles the hierarchical DOM structure.
> 
> 
> <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>
> 
> 
> <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>
> 
> 
> Now you can see what changes would be necessary in whatever way you want
> to approach the task. And you see that there's not (as you wrote below)
> an "instance" of the "</tr><tr>"; these two tags are from different DOM
> parts.
> 
> You can of course use functions to create, delete, and move DOM entries,
> and to add or remove attributes. Add 2x height and 1x colspan, and move
> or recreate the respective sub-tree parts of the 'table' DOM hierarchy.
> Too much effort and runtime demands, IMO.
> 
> You'll have to decide which path to go, of course.
> 
> All I can say is that I'd probably use an approach with 'hidden' parts,
> and all your functions dual_row() and triple_row() will have to do then
> is hiding the first and un-hiding the second, and vice versa.
> 
> Janis
> 

Thanks for cleaning up the HTML :-)

Delete, create or move DOM entries is what I had in mind, and giving the 
elements relevant IDs to simplify their referencing. The HTML is just a bare 
bone model. 

The </tr><tr> bit I also had my doubts about.

I can build and run the dom creation for all object including the whole 
table and the things within. I'm not sure how to change the existing table 
which may be better to keep the html code relatively simple.

I prefer to not initiate CSS display:none|td etc by js to hide or show 
duplicates of objects in different places. I think it will conflict with JS 
that happens to run by the object's active display elsewhere.

Tuxedo 

[...]

Back to comp.lang.javascript | Previous | Next — Previous in thread | 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