In vue, i want draw table by v-for - vue.js

Here is my js array.
mydata:[1,2,3,4,5,6,7,8,9]
And this is result what i want by table
1 2 3
4 5 6
7 8 9
in vanila html,
<table>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>4</td><td>5</td><td>6</td>
</tr>
<tr>
<td>7</td><td>8</td><td>9</td>
</tr>
</table>
1,2,3... data is just sample. It can be string or other data type

<template>
<table>
<tr v-for="row in Math.floor(mydata.length/3)">
<td v-for="col in 3">{{ mydata[(row-1)*3+(col-1)]}}</td>
</tr>
</table>
</template>

Related

Replicating a table

I'm having trouble replicating this table. I'm confused with the rowspan and colspan. I would really appreciate it if someone helps.
Click here to view image of the table
Here you go:
<table>
<tr>
<td colspan="7">The Error Rate on Different Forms</td>
</tr>
<tr>
<td rowspan="2">Form name</td>
<td rowspan="2">A</td>
<td rowspan="2">B</td>
<td rowspan="2">Total Fields (X = A x B)</td>
<td rowspan="2">Fields with errors (Y)</td>
<td colspan="2">Error rate* (Y/X) x 100 (%)</td>
</tr>
<tr>
<td>X/Y</td>
<td>%age</td>
</tr>
<tr>
<td colspan="7">High Risk Errors</td>
</tr>
<!-- normal tr td -->
<tr>
<td colspan="7">Low Risk Error</td>
</tr>
<!-- normal tr td -->
</table>

Find the first element matching conditions with preceding-sibling

My goal is to find the text contains in the first preceding-sibling which match.
My xpath is the following one : //*[#id='myid']/parent::td(/preceding-sibling::td/label/a)[1]
Here I want the text of the td/label/a the most close of the parent of //*[#id='myid'].
Can you tell me if you see any mistake please? Thank you a lot.
Update 1
This one is working //*[#id='myid']/parent::td/preceding-sibling::td[2]/label/a but it is not everytime 2, sometimes it can be 6 or whatever.
Update 2
Example 1
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td>
<label>
<a>text</a>
</label>
</td>
<td></td>
<td>
<input id='myid'>
</td>
</tr>
</tobdy>
Example 2
<tbody>
<tr>
<td></td>
<td>
<label>
<a>text</a>
</label>
</td>
<td></td>
<td></td>
<td></td>
<td>
<input id='myid'>
</td>
</tr>
</tobdy>
Example 3
<tbody>
<tr>
<td></td>
<td>
<label>
<a>text</a>
</label>
</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<input id='myid'>
</td>
</tr>
</tobdy>
I don't think you'd need to go up to any ancestors; just go to the first preceding td (that contains a label/a)...
//input[#id='myid']/preceding::td[label/a][1]/label/a
You can use xpath below. Get first parent tr and it's child label/a
//input[#id='myid']/ancestor::tr[1]//label/a
One more way is to use union operator in xpath with all locators for all cases in order you need:
//input[#id='myid']/ancestor::td/preceding-sibling::td/label/a | //input[#id='myid']/ancestor::tr[1]/preceding-sibling::tr//label/a
Seems like table content are dynamic as i can see in your examples but <tbody> must be one for that table.
(//input[#id='myid']/preceding::td/label/a)[last()]

Add the values of duplicate record in SQL and display it in a report

I am using Microsoft Report Builder to build my reports. I also have a SQL Server database.
I have the following table. Please run the snippet to get a visual representation of my SQL table.
<table style="border:1px solid black;">
<tr>
<th>
Name
</th>
<th>
Timesheet
</th>
</tr>
<tr>
<td align="center">
Jacob
</td>
<td align="center">
2
</td>
</tr>
<tr>
<td align="center">
Jacob
</td>
<td align="center">
3
</td>
</tr>
<tr>
<td align="center">
John
</td>
<td align="center">
1
</td>
</tr>
</table>
What I want is to add all the values of the duplicate records in the timesheets column and display the result in the timesheet column with the name in the name column. No duplicate record should be shown.
Please run the following code snippet to get a visual representation of what I want the table to look like based on the previous table
<table style="border:1px solid black;">
<tr>
<th>
Name
</th>
<th>
Timesheet
</th>
</tr>
<tr>
<td align="center">
Jacob
</td>
<td align="center">
5
</td>
</tr>
<tr>
<td align="center">
John
</td>
<td align="center">
1
</td>
</tr>
</table>
I basically want the duplicate records' timesheets column to be added together.
Is there maybe someway I could do this in report builder which will be easier then SQL Server?
Based on the above issues maybe you want like this please check this example.
SQL Query
DECLARE #EMP TABLE
(
Name VARCHAR(50),
Timesheet INT
);
INSERT INTO #EMP VALUES('Jacob',2),('Jacob',3),('John',1)
SELECT * FROM #EMP
SELECT Name,SUM(Timesheet) AS Timesheet
FROM #EMP
GROUP BY Name
Output

Select all tables and exclude the div

I'm trying to do some stuff with python and selenium but I can't get my xpath to work. I have the following code :
<div id="ctl00_Main_treeCategories">
<table>
<tbody>
<tr>
<td><a id="ctl00_Main_treeCategoriesn0">Online Catalogus</a></td>
</tr>
</tbody>
</table>
<div id="ctl00_Main_treeCategoriesn0Nodes" style="display:block;">
<table cellpadding="0" cellspacing="0" style="border-width:0;">
<tbody>
<tr>
<td>
<div style="width:20px;height:1px"></div>
</td>
<td>
<a id="ctl00_Main_treeCategoriesn1">Dakraam</a>
</td>
</tr>
</tbody>
</table>
<div id="ctl00_Main_treeCategoriesn1Nodes" style="display:block;">
<table cellpadding="0" cellspacing="0" style="border-width:0;">
<tbody>
<tr>
<td><div style="width:20px;height:1px"></div></td>
<td><div style="width:20px;height:1px"></div></td>
<td></td>
<td class="treeNode ctl00_Main_treeCategories_2"><a class="ctl00_Main_treeCategories_0 treeNode ctl00_Main_treeCategories_1">Dakraam Duette® & Plissé Saaaaahade</a></td>
</tr>
</tbody>
</table>
</div>
<table cellpadding="0" cellspacing="0" style="border-width:0;">
<tbody><tr>
<td><div style="width:20px;height:1px"></div></td>
<td></td>
<td class="treeNode ctl00_Main_treeCategories_2" style="white-space:nowrap;">
<a class="ctl00_Main_treeCategories_0 treeNode ctl00_Main_treeCategories_1">Duette® Fixé & Plissé Shadeeeee</a>
</td>
</tr>
</tbody>
</table>
</div>
I try to select all tables within the ctl00_Main_treeCategoriesn0Nodes div, and exclude the div on the first level within (ctl00_Main_treeCategoriesn1Nodes).
I tried :
//*[contains(#id, "ctl00_Main_treeCategoriest")]/div/table/
but this gives a syntax error.
You had two errors on the XPath:
Mispelling of the id (that t at the end)
Trailing / (not necessary)
//*[contains(#id, "ctl00_Main_treeCategories")]/div[not(#id="ctl00_Main_treeCategoriesn1Nodes")]/table
Demo: https://3v4l.org/SusIZ
Edit: Excluded inside ctl00_Main_treeCategoriesn1Nodes divs

Angular datatables - missing sort arrows when columns defined with DTColumnBuilder

I'm using Angular-datatables and when I define the table using the angular renderer I can see nice arrows for sorting column.
<table class="dataTable row-border hover" datatable="ng" dt options="vm.dtOptions">
<thead>
<tr>
<th class="secondary-text">
<div class="table-header">
<span class="column-title">My header</span>
</div>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="ex in ::vm.exes">
<td>{{ex.myValue}}</td>
</tr>
</tbody>
</table>
When I define the columns with DTColumnBuilder.newColumn the arrows are missing (sorting works).
<table datatable="" dt-options="vm.dtOptions" dt-columns="vm.dtColumns"
class="dataTable row-border hover"
dt-disable-deep-watchers="true"
dt-instance="vm.dtInstanceCallback">
</table>
and
vm.dtColumns = [
DTColumnBuilder.newColumn('myValue').withTitle('My header'),
Can I bring the sorting arrows back?