I have a table and I'm iterating in a over an array. In some scenarios, I'll want to add an extra <tr>. I'm looking for something like this:
<table>
<tr *ngFor="let element in array">
<td>
some content
</td>
//Starting block that will only be activated if some variable is true
</tr>
<tr>
<td>
some extra content
</td>
//End of the block that will only be activated if some variable is true
</tr>
</table>
Is there a way to create a boulder html that can wrap it like this?
The options I've tried so far are changing the data structure (array) so it include the element I'm looking for but I'm not pleased with having extra data there just for displaying purpose.
This should do what you want
<table>
<ng-container *ngFor="let element in array"
<tr>
<td>
some content
</td>
</tr>
<tr *ngIf="someVar">
<td>
some extra content
</td>
</tr>
</ng-container>
</table>
Perhaps the best option is to work with ng-repeat.
Example with ng-repeat:
<table ng-controller="myCtrl">
<tr ng-repeat="x in records">
<td>{{x.Name}}</td>
<td>{{x.Country}}</td>
</tr>
</table>
Ng-repeat makes a for in your object or array.
See if this can help you.
Related
I need to display a table with a vertical header instead of the traditional horizontal header. Since the table has to be under another table that is using Vuetify, I want to make the vertical table using the same layout using Vuetify as well.
In plain html/css I know that you can optain this using TH as rows:
<table>
<tbody>
<tr>
<th scope="row">A</th>
<td>b</td>
</tr>
<tr>
<th scope="row">C</th>
<td>d</td>
</tr>
</tbody>
</table>
However, Vuetify doesn't allow that much of modification of its framework and I can't find any other way using their documentation: https://vuetifyjs.com/en/components/data-tables/
Is there any other way to make a vertical table with Vuetify?
You can specify body inside v-data-table with slots.
<v-data-table
:items="desserts">
<template v-slot:body="{ items }">
<tbody>
<tr v-for="header in headers">
<td>
{{ header.text }}
</td>
<td v-for="item in items">
{{ item[header.value] }}
</td>
</tr>
</tbody>
</template>
</v-data-table>
I wanted to drag multiple table data in a row instead of just a single td tag. In other words, when i drag either columns, i want to drag both the "Random" and "name" column together.
<table id="app">
<tr>
<th>Random</th>
<th>name</th>
</tr>
<tr>
<td>
<draggable v-model="items">
<transition-group name="list-complete">
<div v-for="item in items"
v-bind:key="item.message"
class="list-complete-item">
{{ item.message }}
</div>
</transition-group>
</draggable>
</td>
<td>
<div v-for="item in items" class="list-complete-item">
{{ item.name }}
</div>
</td>
</tr>
</table>
I have tried shifting and playing around with the draggable tag and the transition-group tag but nothing seems to work.
Please help. :(
Here is my jsfiddle code ->
https://jsfiddle.net/wusprtnL/63/
This is not supported by Sortable nor by Vue.draggable. So there are no combination of options that will make irt work. Reference: https://github.com/SortableJS/Sortable/issues/1049
Right now this is supported as a plugin by sortable, but the plugin has not been integrated in vue.draggable.
https://github.com/SortableJS/Vue.Draggable/issues/649
I have the next HTML and i have this xpath to find the "Show":
xpath=//*[#id="Some_id"]/div/table/tbody/tr/td[contains(text (), "Show")]
and it works, but i need to find "Show" of a particular item, in this matter of a "Main" item, so i need smth like this:
xpath=//*[#id="Some_id"]/div/table/tbody/tr/td[contains(text (), "Show")]/preceding-sibling::td[contains(text (), "Main")]
but it doesn't work. Thanks
<tr class="even">
<td title="Main">
<strong>Main</strong>
</td>
<td>
text/html
</td>
<td>
Another text
</td>
<td>
Some text here
</td>
<td>
No
</td>
<td>
Show
</td>
</tr>
You can try this xpath. This will first select a tr element which contains the specific td and then select the required a tag.
"//tr[#class='even' and td[#title='Main']]/a[text()='Show']"
EDIT: This xpath worked for the OP
"//*[#id='Some_id']/div[1]/table/tbody/tr[#class='even']/td/a[contains(text (), 'Show')]"
You want to find "Show" that belong to the "Main" row in the table.
Here is what i would do
xpath=//td[#title='Main']/following-sibling::td[contains(text(), 'Show')]
More on xpath axes: http://www.w3schools.com/xsl/xpath_axes.asp
I have an HTML5 page that I want to display data in using knockout binding, I can get the first field to display data, there after I do not see anything. If I remove the first field, the second field displays correctly, if I put the first field back it is the only field to display. If I put a fixed value in it displays correctly. I have confirmed that there are values wherever I try to bind and that binding is correct (e.g. the second field binds correctly if the first field is not present).
Here is my HTML, please tell me what is the problem (I'm an HTML noob):
<table>
<thead>
<tr>
<td></td>
<td>debit amount</td>
<td>credit amount</td>
<td>count</td>
</tr>
</thead>
<tbody>
<tr>
<td>work</td>
<td data-bind="text: accountBalance().WorkDebitAmount"/>
<td data-bind="text: accountBalance().WorkCreditAmount"/>
<td data-bind="text: accountBalance().WorkCount"/>
</tr>
<tr>
<td>open</td>
<td data-bind="text: accountBalance().OpenDebitAmount"/>
<td data-bind="text: accountBalance().OpenCreditAmount"/>
<td data-bind="text: accountBalance().OpenCount"/>
</tr>
<tr>
<td>history</td>
<td data-bind="text: accountBalance().HistoryDebitAmount"/>
<td data-bind="text: accountBalance().HistoryCreditAmount"/>
<td data-bind="text: accountBalance().HistoryCount"/>
</tr>
</tbody>
</table>
You shouldn't expect the table cell element to be self-closing.
<td data-bind="text: accountBalance().HistoryDebitAmount"></td>
Now, since you appear 'new' to the knockout world, I would also put a 'with' binding in your tbody:
<tbody data-bind="with: accountBalance">...</tbody>
Then, in your table cell declarations you no longer need to repeat the bound element :
<td data-bind="text: HistoryDebitAmount"></td>
One further step, I wouldn't do a text binding directly on the table cell, but insert a label or some other element within the table cell:
<td><label data-bind="text: HistoryDebitAmount"></label></td>
All in all, the self-closing issue may resolve everything.
I want to expand a column and display a set of rows inside it.
What I am trying to achieve :
What I have achieved so far
My code:
<table style="background-color:lightgreen" border="1">
<tr >
<td>Id</td>
<td>Name</td>
<td>Col1</td>
<td>Col2</td>
<td>Group Related Column (value for each expanded cell)</td>
<td>Col4</td>
</tr>
<tr >
<td rowspan="5" >#1</td>
<td rowspan="5">AFSBEESS1</td>
<td rowspan="5">
<tr><td>[-] Group Name</td></tr>
<tr><td>#1 in Group</td></tr>
<tr><td>#2 in Group</td></tr>
<tr><td>#3 in Group</td></tr>
</td>
<td rowspan="5">
<tr><td>[-] Group Name</td></tr>
<tr><td>#1 in Group</td></tr>
<tr><td>#2 in Group</td></tr>
<tr><td>#3 in Group</td></tr>
</td>
<td>x</td>
<td>x</td>
</tr>
My fiddle input : http://jsfiddle.net/yDUZg/78/
What is the best table format to do the same?
Is there some plugins to achieve the same effect of easily grouping the column?
Or a better approach to the problem?
Doing in ASP.NET, but as this is a basic thing , I am tagging it as HTML
Have you looked at something like - http://www.jankoatwarpspeed.com/post/2009/07/20/Expand-table-rows-with-jQuery-jExpand-plugin.aspx ?
This plugin allows you to collapse/expand table rows as required.
You html above is wrong, as you nesting tr within td elements. When you add rowspan="x" to a column, you should omit it for the next x rows. eg,
<table>
<tr>
<td rowspan="2">Funky</td>
<td>Joy</td>
</tr>
<tr>
<td>Fun</td>
</tr>
</table>
You are getting confused over the concept of rowspan - http://www.htmlcodetutorial.com/tables/index_famsupp_30.html
For now, I have created a JSFiddle that does what you have requested. The example is highly specialised, and may not work in a generalised way. In the fiddle, I have removed the rowspan and colspan properties. Feel free to add them in when you are comfortable with what they do.
If you're set on using tables then why not just nest them? Where you want the rows to appear within a cell, just add another table.
You can probably do this with JavaScript. I think it would look something like this:
<script type="text/javascript">
...
// You could use these in an event (inside some callback function)
$('tr.expand').style.visibility = 'hidden'
$('tr.expand').style.visibility = 'visible'
// OR you could use these...
$('tr.expand').show();
$('tr.expand').hide();
...
</script>
<!-- And then of course the group of <tr>'s you want to expand
on an event would all have the same class -->
<table>
...
<tr class="expand">
<td>...</td>
</tr>
<tr class="expand">
<td>...</td>
</tr>
...
</table>