I have a need to create following kind of markup with wicket using ajax:
<table>
<tr>
<td><a>first</a></td>
<tr>
<tr>
<td>displayed/closed if first is clicked <a>open</a></td>
</tr>
<tr><td>this and following displayed/closed if above open is clicked</td></tr>
<tr><td>there may be any number of these</td></tr>
<tr>
<td>there may be any number of these as well <a>open</a></td>
</tr>
<tr>
<td>any number of these as well <a>second</a></td>
</tr>
</table>
How to use ListViews or some other wicket element to individually toggle open "inner" rows of the table. I don't want to resort to render everything and toggling visibility but really create the rows in server side only when expand is requested. The markup should also be valid xhtml (rules out arbitrary container for row groups). I know I can put multiple tbodys, but it's good enough only for one level of nesting (no .... allowed).
From Lord Torgamus' comment, the ajax tree sounds appropriate..
Related
Since the align attribute is considered obselete I am cleaning up code to remove it and replace with a CSS class. I'm trying to determine if there is a way to do this using find and replace (or something else) in VS Code.
As an example, I might have some html that looks like this:
<table>
<tr>
<td align="left" class="someclass" id="mainTitleCell" title="Title1">Title1</td>
<td align="center" title="Title2">Title2</td>
<td class="someclass" align="right" title="Title3">Title3</td> <!-- attributes are not always in the same order -->
</tr>
<tr>
<td align="left">Title</td>
<td align="center">Title</td>
<td align="right">Title</td>
</tr>
</table>
which I would like to change to
<table>
<tr>
<td class="left someclass" id="mainTitleCell" title="Title1">Title1</td>
<td class="center" title="Title2">Title2</td>
<td class="right someclass" title="Title3">Title3</td>
</tr>
<tr>
<td class="left">Content</td>
<td class="center">Content</td>
<td class="right">Content</td>
</tr>
</table>
Basically removing the align attribute and either adding a class attribute with a specific value OR adding a specific value to an existing class attribute. Is there a way to do this with the Edit...Replace option in VS Code? I know I can find based on a regex but not sure how I would go about the replace since this becomes
Find the align tag
Remove it
Find a class attribute in the <td> or <th> tag and add the appropriate class
If there is no class attribute, add one with the appropriate class.
Obviously step #1 & 2 are easy, it's #3 & 4 that I'm not sure of. I'd be totally happy with having to run 3 separate find and replace commands (one for left, center and right).
Do I have any options here (I am open to extensions)?
UPDATE:
#Mark had the right answer and I was able to chain together several find and replace commands using the Replace Rules extension. With that I can open a file, run a single keystroke to find and replace everything and clean up the extra spaces in the class attribute.
Try this:
Find: align="(.*?)"(.*?) class="(.*?)"|class="(.*?)"(.*?) align="(.*?)"|align="(.*?)"
Replace: class="$7$1$6 $3$4"$2$5
See regex101 demo.
I'm a little surprised this works as well as it does (I included a couple of other test cases you didn't). The only issue (thus far...) is that it can result in one stray space, as in:
<td class="left ">Title</td> // only happens when there is no class attribute
as you can see in the demo page. You could then search for " and replace with just ". It could be handled by a conditional replacement but vscode find/replace doesn't allow those.
To some degree attributes will be re-ordered so that the class attribute is first, but not always - you didn't mention that as a concern - any attribute that occurs before either the first class or align attribute will not be moved. Otherwise, attributes like id or title if they are between class<->attribute (in any order) will be put last.
I have built an html table that generates dynamically from a data array. It is intended to make a menu of beers on tap in my bar. The array contains the following data: [tap_number, brewery_image, beer_name, price_for_a_pint, price_for_a_pitcher]. Therefore the array dictates that the table generate with 5 columns and 14 rows (with current data). The image data consists of an html tagged image and similarly the beer_name is tagged <h3></h3>. All the html tagged data is rendering as text. What have I done wrong? btw, using Materialize css for basic table styling. Have tried with bootstrap also - same result. Here's a snippet of the html element that the js generates:
<table class = "tabel">
<thead>
<tr>
...has <td>column name</td> X5
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><img src='[url of image]' alt=''></td>
<td><h3>[Beer_Name]</h3></td>
<td>$6</td>
<td>$10</td>
</tr>
...a bunch more rows..
</tbody>
</table>
.
So data positions 1 and 2 should be rendering according to html tag but are just appearing on the page as the text of their html. All data from the array is passed as textContent. Should I be using innerHtml? when I do, nothing at all renders. Cannot figure out what amateur mistake I've made or whether Materialize is screwing me... Thanks for any advice...
It was an amateur mistake. was using innerHtml instead of innerHTML....
I'm using Umbraco as the CMS, 7.6 - Umbraco.TinyMCEv3
So using insert Table will create HTML something like following
<table>
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
How can I configure to add default <thead> when table is created
<table>
<thead>
<tr>…</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
Thanks
I don't know if this is all that possible; it seems as though that functionality isn't included as a setting within the editor.
The obvious thing to do if the setting isn't included is to create it yourself - the way to to do this would be to either extend the existing editor or copy and paste the editor to a new one locally.
The files for the editor are under \Umbraco\lib\tinymce
Unfortunately, it appears the angular js file associated with this editor is only available as a non-human readable minified version - likely owing to the fact that tinymce is under license. So any modification of this would be quite tricky, to say the least.
Perhaps see if there is another way around this? You can always set css to select the first child row of the table if it is for styling purposes. Otherwise the only other option would be to create your table in the editor, then choose the code edit option to manually insert the correct table structure.
I have v5 with vue.js
After created table:
1-Click right on row of head you want > row > row properties
click right on row of head>row>row properties
2-In general choose "Header" at Row type
in general select of "Header" at Row type
How can I get colspan like feature in a form:textarea in spring form tag?
This is my current code:
<td><html:textarea rows="5" cols="60" path="comment" /></td>
There are total 5 columns in the table. I would like to have the label in the first column and textarea in the remaining 4 colums. How can I achieve this?
I think you don't need a "colspan-like" solution but colspan itself. Note that what you want to span is a table cell, not the textarea. Therefore, you must use the attribute on the enclosing td element.
Text areas in HTML have their own layout of rows and columns but it's completely unrelated to HTML tables. A colspan attribute on a textarea simply doesn't make sense.
Here's a piece of HTML code that does the trick.
<table>
<tr>
<td>X</td>
<td>Y</td>
<td>Z</td>
</tr>
<tr>
<td>label</td>
<td colspan="2"><textarea cols="60" rows="3"></textarea></td>
</tr>
</table>
Here's a working example on JSFiddle, styled with CSS to make the structure more visible.
I used the following code to generate a form in attached image.
Is it possible to change the size of the fields in the form.
I want to decrease size of input field of Estimated time and the dropbox field to the right of it
{{=form.custom.begin}}
<table>
<table><tr>
<td><b>Type :</b></td><td><div>{{=form.custom.widget.type}}</div></td>
</tr><tr>
<td><b>Title :</b></td><td><div>{{=form.custom.widget.title}}</div></td>
</tr><tr>
<td><b>Description :</b></td><td><div>{{=form.custom.widget.description}}</div></td>
</tr><tr>
<td><b>Estimated Time :</b></td><div'><td>{{=form.custom.widget.estimated_time}}{{=form.custom.widget.estimated_time_unit}}</td> </div>
</tr>
<tr>
<td></td><td><div align='center'>{{=form.custom.submit}}</div></td>
</tr>
</table>
{{=form.custom.end}}
Yes. You can and there are many ways.
The recommended way is to look at the generates JS. You will find it follows a naming convention described in the book. You can use CSS to change the look-and feel of every widget.
input[name=estimate_time] { width:50px }
Similarly you can use JS/jQuery (I would recommend you do this in the view).
jQuery(document).ready(function(){ jQuery('input[name=estimate_time]').css('width','50px');});
You can also use jQuery-like syntax in python in the controller:
form.element('input[name=estimate_time]')['_style']='width:50px'