By vertical table, I mean the first column of each row is a header. Like this:
<table>
<tr>
<th>Header 1</th>
<td>Cell 1</td>
</tr>
<tr>
<th>Header 2</th>
<td>Cell 2</td>
</tr>
</table>
The problem is, to render the <TableCell /> to be a <th /> we need to wrap it inside <TableHead />, otherwise it will render to <td />. But <TableHead /> also cannot be placed inside <TableRow /> since it renders to <thead />. So the following code won't work:
<Table>
<TableRow>
<TableHead>
<TableCell>Header 1</TableCell>
</TableHead>
<TableCell>Cell 1</TableCell>
</TableRow>
<TableRow>
<TableHead>
<TableCell>Header 1</TableCell>
</TableHead>
<TableCell>Cell 2</TableCell>
</TableRow>
</Table>
Then, how can I achieve the first example using Material-UI?
Ohh, Nevermind.
I am not keen enough to see the variant property in the documentation. All you need to do is set the variant property of <TableCell /> to head.
<Table>
<TableRow>
<TableCell variant="head">Header 1</TableCell>
<TableCell>Cell 1</TableCell>
</TableRow>
<TableRow>
<TableCell variant="head">Header 1</TableCell>
<TableCell>Cell 2</TableCell>
</TableRow>
</Table>
The approved solution will generate the following error message :
<tr> cannot appear as a child of <table>. Add a <tbody>, <thead> or <tfoot> to your code to match the DOM tree generated by the browser
So you may want to add a <tbody> tag as below :
<Table>
<TableBody>
<TableRow>
<TableCell variant="head">Header 1</TableCell>
<TableCell>Cell 1</TableCell>
</TableRow>
<TableRow>
<TableCell variant="head">Header 1</TableCell>
<TableCell>Cell 2</TableCell>
</TableRow>
</TableBody>
</Table>
Related
I have seen few solutions online but It did not solve my problem. I am getting JSON object in the response.
<!-- Show Negativita Check Azienda -->
<table class="divide-y divide-gray-200 table-fixed w-full mt-4" v-if="showTableAzienda" v-for="item in impreses">
<thead class="bg-gray-900">
<tr>
<th>Codice Fiscale</th>
<th>Flag Domande</th>
<th>Flag Pregiudizievoli</th>
<th>Flag Procedure</th>
<th>Flag Protesti</th>
<th>Data Evasione</th>
</tr>
</thead>
<tbody class="text-center py-6" >
<tr>
<td>{{item.codice_fiscale}}</td>
<td>{{item.flagDomande}}</td>
<td>{{item.flagPregiudizievoli}}</td>
<td>{{item.flagProcedure}}</td>
<td>{{item.flagProtesti}}</td>
<td>{{item.dataEvasione}}</td>
</tr>
</tbody>
</table>
Here is JSON response
{
"codice_fiscale":"CLLLCA82R69D960T",
"flagDomande":"N",
"flagPregiudizievoli":"N",
"flagProcedure":"N",
"flagProtesti":"N",
"dataEvasione":"2021-11-04"
}
because the elements in the object are six. it generates th for six times with no output. if I print {{impreses.codice_fiscale}} then it shows the output. I am not able to understand behavior.
EDIT
Second Question
{"EventiNegativiPersona":
{"InfoPersona":
{"Nominativo":
{"#attributes":{"cognome":"","nome":""}},
"CodiceFiscale":"CLLLCA82R69D960T"},
"ElencoProtesti":{"#attributes":
{"flagPresenza":"N"}},"ElencoPregiudizievoli":
{"#attributes":{"flagPresenza":"N"}}}}
I would like to show these but {{item.EventiNegativiPersona.#parameters.so-on}} does not work because of #parameters. How can i show this?
Based on the response object shown in your question you could move the v-for to the td tag :
<table class="..." v-if="showTableAzienda" >
<thead class="bg-gray-900">
<tr>
<th>Codice Fiscale</th>
<th>Flag Domande</th>
<th>Flag Pregiudizievoli</th>
<th>Flag Procedure</th>
<th>Flag Protesti</th>
<th>Data Evasione</th>
</tr>
</thead>
<tbody class="text-center py-6" >
<tr>
<td v-for="item in impreses">{{item}}</td>
</tr>
</tbody>
</table>
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'd like to send information to an ActionFormBean using a jsp page that contains a structured code like this:
<table>
<thead>
<tr>
<th>ID Turno</th>
<th>Data e Ora</th>
<th>Sede turno</th>
</tr>
</thead>
<tbody>
<html:form action="/dettagliTurno">
<c:forEach var="ris" items="${usersession.searchResult}" >
<tr>
<td><c:out value="${ris.idTurno}"/></td>
<td><c:out value="${ris.dataOra}"/></td>
<td><c:out value="${ris.luogo}"/></td>
<td>
<html:hidden property="id" value="${ris.idTurno}"/>
<html:submit value="Dettagli" property="id" />
</td>
</tr>
</c:forEach>
</html:form>
</tbody>
</table>
The only one information that I need to send to the ActionFormBean is "id" but if click on the button "Dettagli" of the second/third row (of the example showed in this image) the value sent to the ActionForm is always the one of the first row (that is '5')!
How can I solve this problem and set the correct value of id according to the row-button "Dettagli" selected?
GOT IT!
I solved the problem by changing code this way:
<c:forEach var="ris" items="${usersession.searchResult}" >
<tr>
**<html:form action="/dettagliTurno">**
<td><c:out value="${ris.idTurno}"/></td>
<td><c:out value="${ris.dataOra}"/></td>
<td><c:out value="${ris.luogo}"/></td>
<td>
<html:hidden property="id" value="${ris.idTurno}"/>
<html:submit value="Dettagli" property="id" />
</td>
**</html:form>**
</tr>
With this version, form set the correct value of "idTurno" and properly send it to ActionForm.
Hope it will be helpfulto someone with the same problem of mine.
Calc
Hi I have been looking for a way of updating xml produced in sql to add the count of child nodes and add the count to the parent node using SQL
I've tried various workings around
SET #xml.modify
(
'insert attribute TrCount {count(/XML/Acs/Act/Trs/Tr)} into (./XML/Acts/Act/Trs)'
);
<XML>
<Id>12</Id>
<DateCreated>2013-04-11</DateCreated>
<Acts AccountCount="4">
<Act RowID="1>
<Trs>
<Tr RowID="1" />
</Trs>
</Act>
<Act RowID="2">
<Trs>
<Tr RowID="1" />
<Tr RowID="2" />
</Trs>
</Act>
<Act RowID="3">
<Trs>
<Tr RowID="1"/>
</Trs>
</Act>
<Act RowID="4">
<Trs>
<Tr RowID="1" />
<Tr RowID="2" />
<Tr RowID="3" />
<Tr RowID="4" />
<Tr RowID="5" />
<Tr RowID="6" />
<Tr RowID="7" />
</Trs>
</Act>
</Acts>
</XML>
above is a sample, I have got it to give me a count of within but I can not seem to get a count of each within each , so the result would look like
<Act RowID="1>
<Trs Trcount="1">
<Tr RowID="1" />
</Trs>
</Act>
<Act RowID="2">
<Trs Trcount="2">
<Tr RowID="1" />
<Tr RowID="2" />
</Trs>
</Act>
<Act RowID="3">
<Trs Trcount="1">
<Tr RowID="1"/>
</Trs>
</Act>
<Act RowID="4">
<Trs Trcount="7">
<Tr RowID="1" />
<Tr RowID="2" />
<Tr RowID="3" />
<Tr RowID="4" />
<Tr RowID="5" />
<Tr RowID="6" />
<Tr RowID="7" />
</Trs>
Cheers
Try something like this, which assumes each Act contains only one Trs:
declare #count int = #xml.value('count(/XML/Acts/Act)', 'int'),
#counter int = 1;
while (#counter <= #count)
begin
SET #xml.modify ('insert attribute TrCount {count(/XML/Acts/Act[sql:variable("#counter")]/Trs/Tr)} into (/XML/Acts/Act[sql:variable("#counter")]/Trs)[1]');
set #counter += 1;
end
insert() can only modify a singleton, not a whole set of nodes in one go.
How can I locate an element "1988" (the fourth line) in the following table:
<table border="0" width="820" cellpadding="2" cellspacing="0">
<tbody>
<tr valign="top">
<td class="default" width="100%">Results <b>1</b> to <b>10</b> of <b>1988</b></td>
</tr>
<tr valign="top">
<td class="default" bgcolor="#C0C0C0"> <font class="resultsheader"> ...etc
</tr>
</tbody>
</table>
IMPORTANT: I know one way that works (By.xpath):
driver.findElement(By.xpath("//td[#width='100%']")).getText();
However, this way does not ALWAYS work. The page is dynamic, so I need a way to locate that element no matter what changes happen to the page.
I tried the following but I am not sure:
By.xpath("//html//body//table//tbody//tr[3]//td//table//tbody//tr//td[2]//table[4]//tbody//tr[1]//td//b[3]"
If you can't change the HTML and want to use attributes for selection, you can write something like this:
//table[#border=0][#width=820]//tbody//tr[1]//td//b[3]