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

Groups > comp.lang.javascript > #41287

Re: DOM manipulation of table and img objects

Show key headers only | View raw

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

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