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

Groups > comp.lang.javascript > #41282

Re: DOM manipulation of table and img objects

Show all headers | View raw

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


> 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 — 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