Essentially, I want a table which you don't have to scroll across to page to view all its content.
Instead, if the text is too long to fit in a table, I want there to be a tooltip which compensates for this.
I don't want to set the width of the table statically, as I want it to stretch across the div in the same manner on different screens.
<tbody>
<tr v-for="row in rows">
<td tabindex="0">{{ row.longname }}
<span
v-tooltip.right="{ html: 'overrunning', class:'tooltip' }"
></span>
<div id="overrunning">
<p>The over running text</p>
</div>
</td>
<td tabindex="0">{{ row.name }}</td>
</tr>
</tbody>
Related
When trying to fill a table with rows using v-for it is quite easy to map the v-for elements 1:1 with the rows like:
<template>
<table>
<tr v-for="item in items"><td>{{item}}</td></tr>
</table>
</template>
My question is: how can I create multiple rows (eg td elements) per item (see following pseudocode):
<template>
<table>
<nothing v-for="item in items">
<tr><td>{{item.line1}}</td></tr>
<tr><td>{{item.line2}}</td></tr>
</nothing>
</table>
</template>
Here <nothing> should not be emitted in the DOM as a level, only <td> directly under <table>.
Is this possible?
In Vue.js, you can use tag <template>, it does exactly what you meant by nothing.
<table id="t1">
<template v-for="item in items">
<tr><td>{{item.line1}}</td></tr>
<tr><td>{{item.line2}}</td></tr>
</template>
</table>
But alternatively, you can wrap these two lines into tbody tag to actually render it and group the lines in two, e.g., for styling.
In addition to Dmitry's solution, typically, you would want to loop your rows, and use blocks in the same td.
<table>
<tr v-for="item in items">
<td>
{{item.line1}} <br />
{{item.line2}}
</td>
</tr>
</table>
or
<table>
<tr v-for="item in items">
<td>
<div>{{item.line1}}</div>
<div>{{item.line2}}</div>
</td>
</tr>
</table>
I have a table where in each TR when I click it redirects me to another view with the detail, the idea is that I have never worked with Vue and I can't think how to disable the event when I click on the first TD tag of the table.
Before in Jquery I did it this way:
//Add onclick to TR
$('table tr').click(function(e) {
// Avoid redirecting if it's a delete button
if(!$(e.currentTarget).hasClass('delete')) {
// Not a button, redirect by taking the attribute from data-route
window.location.href = $(e.currentTarget).data('route');
}
});
But with Vue I don't know how to do it in the onclick event.
This is my table and the method
<table
id="accounts-table"
class="
table table-listbox
table-bordered_
table-responsive-md
table-striped_
text-center_
"
>
<thead>
</thead>
<tbody>
<tr v-if="tableData.length === 0">
<td colspan="4" class="text-center">
No hay oportunidades para mostrar.
</td>
</tr>
<template v-if="loading === true">
<tr colspan="9" class="text-center">
<b-spinner variant="primary" label="Spinning"></b-spinner>
<b-spinner variant="primary" type="grow" label="Spinning"></b-spinner>
</tr>
</template>
<template v-else>
<tr
v-for="(data, k) in tableData"
:key="k"
#click="viewOpportunity(k, data)"
>
<slot :row="data">
<td v-if="permissions.includes('view all opportunities')" width="10">
<div class="iq-email-sender-info">
<div class="iq-checkbox-mail">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="mailk">
<label class="custom-control-label" for="mailk"></label>
</div>
</div>
</div>
</td>
<td width="20">
<vue-avatar
:username="data.sales_man"
:title="data.sales_man"
:size="32"
v-if="data.sales_man != ''"
></vue-avatar>
</td>
<td width="5">
<template v-if="data.has_file != false">
<i
class="ri-attachment-line"
style="font-size: 20px; color: #007bff"
></i>
</template>
</td>
<td width="120" nowrap>
<template>
<p class="mb-0">{{ data.created_at }}</p>
<small class="text-info mt-5">
Fecha creación
</small>
</template>
</td>
</slot>
</tr>
</template>
</tbody>
</table>
viewOpportunity(data) {
window.location.href = "/opportunity/" + data.id;
},
For example in the first TD of the table I would like that it does not redirect me to the page but from the 2nd TD it redirects me.
On first td element use this even modifier - #click.stop
Prevent on click on parent when clicking button inside div
This kind of issue ever answered .. please have a look on this
If someone needs an href inside a table that has a that has a #click method in the row, but you wat to the link does not fire the click event in the row and also to prevent event propagation when there is no method to call, e.g. a simple <a href="mailto:someone#example.org"> link, try to use this trick with #click.self:
BEFORE
<table>
<tr>
<th>COLUMN A</th>
<th>COLUMN B</th>
</tr>
<tr #click="myMethodFromRow">
<td>Some Value</td>
<td>
<a target="_blank" :href="mailto:someone#example.org"> My link </a>
</td>
</tr>
</table>
AFTER
<table>
<tr>
<th>COLUMN A</th>
<th>COLUMN B</th>
</tr>
<tr>
<td #click="myMethodFromRow">Some Value</td>
<td #click.self="myMethodFromRow">
<a target="_blank" :href="mailto:someone#example.org"> My link </a>
</td>
</tr>
</table>
In this case I wanted to execute myMethodFromRow clicking inside each td, but not clicking the link. So I changed the myMethodFromRow method from the tr and put it into each td. But the most important trik was to use #click.self for the td with the href link.
.self only trigger handler if event.target is the element itself, i.e. not from a child element.
DOCUMENTATION: https://vuejs.org/guide/essentials/event-handling.html#event-modifiers
I have a table where each "logical" row contains of two "markup rows".
<table class="table table-bordered">
<tbody>
<template v-for="(note, index) in notes">
<tr>
<td>
{{ moment(note.noteTime).format('YYYY-MM-DD HH:mm') }}
</td>
<td>
{{ note.locationName }}
</td>
</tr>
<tr>
<td colspan="2">
{{ note.noteText }}
</td>
</tr>
</template>
</tbody>
</table>
Is there a way generate this kind of table in vue without hurting html syntax (template element is not valid inside tbody)?
<template> does not generate a html element and thus will not interfere with html syntax.
There is actually a similar example inside the VueJS docs:
https://v2.vuejs.org/v2/guide/list.html#v-for-on-a-lt-template-gt
<ul>
<template v-for="item in items">
<li>{{ item.msg }}</li>
<li class="divider" role="presentation"></li>
</template>
</ul>
Here is a jsFiddle to see the example from the docs in action. You can inspect the HTML syntax:
https://jsfiddle.net/50wL7mdz/545901/
How can I locate some text in a span in one row using other text that's in other span in other row by xpath in selenium, I don't want to traverse by html tags as html template can be changed dynamically and also I don't have a unique Id.
Below is my code with highlighted text as question and answer text :-
<div id="surveyquescontent">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td>
<span class="mrQuestionText" style="">**Have you chosen your own date for when your electric bill is due?**</span>
</td>
</tr>
<tr>
<td>
<span style="">
<span class="mrQuestionTable" style="display:block;margin-left: 1em;">
<span id="Cell.0.0" style="">
<label for="_Q1_C0">
<span class="mrSingleText" style="">**Yes**</span>
</label>
</span>
</span>
</span>
</td>
</tr>
</tbody>
</table>
</div>
You can try to select the correct <tr> and use following-sibling::tr and continue digging to the desired <span> for example :
//tr[.//span[#class='mrQuestionText']]
/following-sibling::tr[1]
//span[#class='mrSingleText']
In above example I'm using class attribute value to get correct <tr>, you can change it easily to be using text within the <span> if you have to, or using both text and class :
//tr[.//span[
#class='mrQuestionText'
and
.='Have you chosen your own date for when your electric bill is due?'
]]
/following-sibling::tr[1]
//span[#class='mrSingleText']
<table>
<tbody>
<tr>
<th style="width:200px;">Features</th>
<th style="width:300px;">Settings for this entry round</th>
<th style="width:300px;">
</tr>
<tr>
<td style="background-color: rgb(234, 234, 234);"> is_team_round </td>
<td style="text-align:center;">
<div>
<select id="account_3" onchange="changeAccount(3);" style="background-color: rgb(255, 255, 255);">
<div> </div>
</div>
</td>
<td style="text-align:center;"> Yes </td>
</tr>
<tr>
<td> is_file_uploads </td>
<td style="text-align:center;">
<div>
<select id="account_4" onchange="changeAccount(4);">
<div> </div>
</div>
</td>
<td style="text-align:center;"> Yes </td>
</tr>
</tbody>
</table>
How can I select the ID account 3 depending if the text is is_team_round?
I tried //td[contains(text(), 'is_team_round')], and it selects is_team_round.
Then I tried //td[contains(text(), 'is_team_round')]//select[#id='account_3'], but it doesn't work
Try the xpath:
//tr[./td[contains(text(), 'is_team_round')]]//select
This says to find the row (tr) that has the cell (td) with text 'is_team_round". Then find the select list inside that row.
Note: Your original solution did not work because it tried to find a select list inside the cell containing the text. As seen in the HTML, the select list is not inside the same cell. Hence, the need to use a common ancestor (ie the row).
I'd do it using 2 nested jquery's .each() function to iterate over the cells, and then testing the values with jquery's .val() or .html() function to get and compare the values.check out those functions uses and syntax at jquery.com.
hope it helped
$("#table").find("tbody td").eq('is_team_body');
id try something like this