I have a Component in Vue
I need to add list of 6 items to the table 2x3.
Is there any way to conditionally add "" after every second insert?
<template>
<tr>
<td>asdasd</td><td>qweqwe</td>
<!-- here i would like to insert </tr><tr> after every second add
v-if="post.tag%2"? -->
</tr>
You could do something like this:
<table>
<tr v-for="i in fruits.length/2"> <!--- create a row for every second item -->
<td>
Fruit: {{fruits[i*2]}}
</td>
<td v-if="i*2+1 < fruits.length"> <!--- check if there is another item left to display -->
Fruit: {{fruits[i*2+1]}}
</td>
</tr>
</table>
It's not very elegant, but it does the job! I made a Codepen here.
Related
I made a simple Go backend that renders an html table (from a SQLite database).
In the same backend i have an /updates endpoint with SSE events when a new row is added to the database.
I want to use htmx to listen for events and then add a row to the table.
What is the right pattern to do this?
I've read https://htmx.org/extensions/server-sent-events/
the example here is to trigger a GET when an event arrives:
<div hx-ext="sse" sse-connect="/updates">
<div hx-get="/table" hx-trigger="sse:rowadded">
...
</div>
</div>
In this way i request the entire table at every update.
How could i add only a single row to the existent rendered table?
You can do this with client side templates.
See https://htmx.org/extensions/client-side-templates/
Example:
<table>
<thead>
<tr>
<th>
Manufacturer
</th>
<th>
Model
</th>
<th>
Power (KW)
</th>
</tr>
</thead>
<tbody id="idTableBody">
<tr id="ModelId_250">
<td>Husqvarna</td>
<td>701 Supermoto</td>
<td>55</td>
</tr>
</tbody>
</table>
In this example mustache is used as templating engine.
<div hx-ext="client-side-templates">
<div hx-ext="sse" sse-connect="/sse-motorbikes">
<div sse-swap="new_bike"
hx-swap="afterbegin"
hx-target="#idTableBody"
mustache-template="idTemplateInsertModel">
</div>
</div>
</div>
Note: EventName is new_bike
Here is the template:
<template id="idTemplateInsertModel">
<tr id="modelId_{{modelId}}">
<td>
{{manufacturer}}
</td>
<td>
{{model}}
</td>
<td>
{{power}}
</td>
</tr>
</template>
With this sse event
type: "new_bike"
data:'{"modelId":208,"manufacturer":"Honda","model":"CRF 1100 L Africa Twin","power":75}'
this row will be inserted into the table body
<tr id="modelId_208">
<td>Honda</td>
<td>CRF 1100 L Africa Twin</td>
<td>75</td>
</tr>
Update
If you want to use a GET request to fetch the new row from the server, you can pass the data sent with the sse event (e.g. an id) to the request.
Check out the answer to this question.
https://stacko...how-to-get-url-for-htmx-get-from-an-sse-event-which-itself-triggers-the-hx-get-c
I am new to the skrape.it library and try to extract content of a table.
Is there a way to process every table by it self, so I get a List with all texts of a row in a List with all rows? e.g.: List<List>
My current approach is to get all texts from every td and count all tr and then process these two lists by calculating the index of the required text.
One row looks like this:
<tr role="row">
<td class="grad" style="background:#067A25; width:50px">
<div class="grad_outer">
<span>4c</span>
</div>
</td>
<td class="name">
King Louie
</td>
<td>
Dave
</td>
<td>
11.03.2022
</td>
<td>
12
</td>
<td>
64.2
</td>
</tr>
I also need to extract the background css attribute of each first td tag. How can I do this?
I have a vuejs-datatable, and now I want to have an option-column with edit- / delete-links.
This is the table-body which gets iterated from the function getRows():
<tbody>
<tr v-for="(row, idr) in get_rows()" v-bind:key="idr">
<td>{{row.id}}</td>
<td>{{row.email}}</td>
<td>
<b-icon-pencil-square></b-icon-pencil-square>
<b-icon-trash></b-icon-trash>
</td>
</tr>
</tbody>
Now the td with the {{row.id}} and {{row.email}} are fine. However the :data-id="row.id" displays only the id of the first entry. Links in every row in my table have the same data-id. I do not understand why this is happening and what am I doing wrong.
Use code below (notice, it's not using data-id):
<tbody>
<tr v-for="(row, idr) in get_rows()" v-bind:key="idr">
<td>{{row.id}}</td>
<td>{{row.email}}</td>
<td>
<b-icon-pencil-square></b-icon-pencil-square>
<b-icon-trash></b-icon-trash>
</td>
</tr>
</tbody>
The below is a snippet from our html code which appears as a drop down list in the application. I am unable to select a particular value from the drop down list using Select class in Selenium - possibly because it doesn't have "Option" tags?. Is there any way to select the item?
-UPDATE: This has a parent tag which talks about visibility. Basically to tell that elements are visible only if the user clicks the drop down arrow.
"< input type="hidden" *****"
For e.g. I need to select 'I am option2' from the list during the test execution.
<div id="xyz" class="DropdownInnerContainer" style="z-index:99999;">
<table id="abc" class="DropdownItemContainer" list="1000020">
<tr class="">
<td value="" index="0" title="">
</td>
<td class="BorderCell"></td>
</tr>
<tr class="">
<td value="I am option1" index="1" plid="1002827">I am option1</td>
<td class="BorderCell"></td>
</tr>
<tr class="">
<td value="I am option2" index="2" plid="1002828">I am option2</td>
<td class="BorderCell"></td>
</tr>
<tr class="">
<td value="I am option3" index="3" plid="1002829">I am option3</td>
<td class="BorderCell"></td>
</tr>
<tr class="">
<td value="I am option4" index="4" plid="1002830">I am option4</td>
<td class="BorderCell"></td>
</tr>
</table>
If the text inside of the td that you want to select is unique, then you can click the table element with the id of 'abc' and then click the following element. The code provided is C#, but can be translated pretty easily.
IWebElement option = _driver.FindElement(By.XPath("//td[text()='I am option2']"));
It appears that since the drop down options were inside a < table >, the Select class was unable to identify the list options. So here's what I did:
First click() the dropdown, which opens up the menu:
driver.findElement(By.xpath(".//*[#id='abc01_tbl']/div/div")).click();
Then pass the value using the contains() method and then click() on it.
driver.findElement(By.xpath(".//*[#id='xyz01_tbl']/tbody/tr/td[1][contains(text(),'I am option2')]")).click();
You can not use Select in this scenario because there is no any select tag for dropdown. Drop down is under table body.
Please use below xpath for select option form drop down.
driver.findElement(By.xpath("//table[#id='abc']/tr[td[text()='your option text']]/td"));
I am learning Angular-2 and try to build data-grid component and run into a problem with dynamic interpolation.
Assume, the other component will consume the data-grid like the following:
<data-grid [model] = 'users'>
<column header='Last Name' value="lastName" ></column>
<column header='First Name' value='firstName' ></column>
<column header='Address' value='address' ></column>
</data-grid>
The data-grid component holds a collection of columns. From the data-gird, I try to loop through the columns collection to build the column header then show all data. The headers for the table is easy but I don't know how to do the nested interpolation for row and columns.
<div class="container" >
<table class="table table-hover">
<thead class="thead-default">
<tr>
<th template="ngFor let col of columns">
{{ col.header}}
<th>
</tr>
</thead>
<tbody>
<tr template="ngFor let row of model">
<td template="ngFor let col of columns">
<!-- want to loop though the columns
{{row.{{col.value}}}} //How to make this statement works? -->
</td>
</tr>
</tbody>
</table>
</div>
Any idea how to solve this problem?
thanks,
Austin
You do not need the additional evaluation brackets. Use square brackets for array indexing.
<tr *ngFor="let row of model">
<td *ngFor="let col of columns">
{{row[col.value]}}
</td>
</tr>
http://plnkr.co/edit/DVwolRDu0JNcsXTaTrir