• DOM manipulation of table and img objects

    From Tuxedo@21:1/5 to All on Mon Apr 17 13:42:21 2023
    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

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From Janis Papanagnou@21:1/5 to Tuxedo on Mon Apr 17 14:27:09 2023
    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


    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From The Natural Philosopher@21:1/5 to Janis Papanagnou on Mon Apr 17 15:43:38 2023
    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

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From Tuxedo@21:1/5 to Janis Papanagnou on Tue Apr 18 04:55:09 2023
    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

    [...]

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From Janis Papanagnou@21:1/5 to Tuxedo on Tue Apr 18 06:28:32 2023
    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

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From Janis Papanagnou@21:1/5 to Janis Papanagnou on Tue Apr 18 06:38:10 2023
    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


    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From Tuxedo@21:1/5 to Janis Papanagnou on Tue Apr 18 20:10:06 2023
    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

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)