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

Groups > comp.lang.javascript > #41281 > unrolled thread

DOM manipulation of table and img objects

Back to article view | Back to comp.lang.javascript

Contents

  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

#41281 — DOM manipulation of table and img objects

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

[toc] | [next] | [standalone]

#41282

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
> 

[toc] | [prev] | [next] | [standalone]

#41283

On 17/04/2023 13:27, 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.
> 
Yes. IME that is simple and works very well.
Then if you want to change any information iniside an element, give it 
an id or a name and use the getelementbywhatever().thingToChange ="blah"


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

-- 
The theory of Communism may be summed up in one sentence: Abolish all 
private property.

Karl Marx

[toc] | [prev] | [next] | [standalone]

#41284

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 

[...]

[toc] | [prev] | [next] | [standalone]

#41285

On 18.04.2023 04:55, Tuxedo wrote:
> Janis Papanagnou wrote:
>>
>> 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.
> 
> 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.

But then you have the complexity in the Javascript code. And whenever
you want to change the HTML-Format and thus the DOM-Structure you'll
have to change your Javascript implementation - not only the simple
straightforward _generation_ of the DOM -; which I consider inflexible
and error-prone.

Myself I have only created HTML from Javascript but never reorganized
the DOM entities completely; that's quite messy. (If you already used
methods to create the DOM (or parts of the DOM) you know the methods
available to also delete parts of it, I suppose; for a simple deletion
task you can use removeChild(), removeAttribute(), etc. - So you have
everything to manipulate an existing DOM. Apply it to your structure.)

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

I understand that you don't want to "duplicate" HTML code. You'll have
to bite the bullet; either simple visibility change [of duplicate HTML],
or complex/runtime-inefficient reorganization [of the DOM] - I suggest
to simply try that out then, if that's what you prefer.

I don't understand what "conflict with JS"/"active display" you see, so
I have to abstain commenting on that.

A third option may be to use a similar approach as HTML page designers
use for representation of one page for a large (e.g. computer) screen
and for a small (e.g. smartphone) screen. My impression was that you'd
also have a duplicate structure here, but I've never had the necessity
to do that, so others may be able to provide information and details.

Janis

[toc] | [prev] | [next] | [standalone]

#41286 — [OT] Responsive design (was Re: DOM manipulation of table and img objects)

On 18.04.2023 06:28, Janis Papanagnou wrote:
> 
> A third option may be to use a similar approach as HTML page designers
> use for representation of one page for a large (e.g. computer) screen
> and for a small (e.g. smartphone) screen. My impression was that you'd
> also have a duplicate structure here, but I've never had the necessity
> to do that, so others may be able to provide information and details.

For a start  https://en.wikipedia.org/wiki/Responsive_web_design

> 
> Janis
> 

[toc] | [prev] | [next] | [standalone]

#41287

Janis Papanagnou wrote:

> On 18.04.2023 04:55, Tuxedo wrote:
>> Janis Papanagnou wrote:
>>>
>>> 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.
>> 
>> 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.
> 
> But then you have the complexity in the Javascript code. And whenever
> you want to change the HTML-Format and thus the DOM-Structure you'll
> have to change your Javascript implementation - not only the simple
> straightforward _generation_ of the DOM -; which I consider inflexible
> and error-prone.

True, although in this case, it's a page that doesn't change much, or at 
least not the part where the DOM-restructuring would happen.

> Myself I have only created HTML from Javascript but never reorganized
> the DOM entities completely; that's quite messy. (If you already used
> methods to create the DOM (or parts of the DOM) you know the methods
> available to also delete parts of it, I suppose; for a simple deletion
> task you can use removeChild(), removeAttribute(), etc. - So you have
> everything to manipulate an existing DOM. Apply it to your structure.)

Indeed can be messy. At the same time, it can offer a powerful way to 
flexible HTML output via a single source code, as long as the HTML itself or 
the contents within isn't going to be subject to frequent changes.

>> 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.
> 
> I understand that you don't want to "duplicate" HTML code. You'll have
> to bite the bullet; either simple visibility change [of duplicate HTML],
> or complex/runtime-inefficient reorganization [of the DOM] - I suggest
> to simply try that out then, if that's what you prefer.
> 
> I don't understand what "conflict with JS"/"active display" you see, so
> I have to abstain commenting on that.

It's a bit hard to explain as I haven't done the code in combination with a 
possible simple hide and show duplicates but I suspect it won't work.

> A third option may be to use a similar approach as HTML page designers
> use for representation of one page for a large (e.g. computer) screen
> and for a small (e.g. smartphone) screen. My impression was that you'd
> also have a duplicate structure here, but I've never had the necessity
> to do that, so others may be able to provide information and details.

Maybe it will be better to use divs or other block elements and emulate the 
simple table display. It may prove easier to restructure that with some 
JS/CSS actions or CSS conditions alone.

So far, what's needed can easily be done but not without reloading the page, 
which indeed also includes some unnecessary code duplication that I'd like 
to avoid, but more so, the undesirable page reload. Restructuring DOM may as 
you say prove messy and inefficient but can also be a way to deal with 
browser resizing or mobile screen orientation change on certain pages. 
Either method can however work and it's probably not important which way or 
another it's done in this case since the page in question is neither a major 
network hog with many processes nor is it expected to change much.

For now, I'm just exploring possible solutions to a simple display issue.

Meanwhile, many thanks for the very good tips.

Tuxedo

> 
> Janis

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web