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
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
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
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.
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.
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
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
Sysop: | Keyop |
---|---|
Location: | Huddersfield, West Yorkshire, UK |
Users: | 415 |
Nodes: | 16 (2 / 14) |
Uptime: | 45:31:27 |
Calls: | 8,722 |
Calls today: | 5 |
Files: | 13,276 |
Messages: | 5,957,485 |