I would like to drag multiple <tr>'s up and down a table column at the same time. It's rather straight forward to drag individual rows using <draggable>, however what I'm looking for is a way to group, say, the previous row with the selected row and move them together while maintaining the ability to drag each row individually later.
I'm using Vue 2 and vuedraggable v2.24.3.
The table is as follows.
<table>
<thead>
<tr>
<th>...</th>
<th>...</th>
<th>...</th>
<th>...</th>
</tr>
</thead>
<draggable>
<vue-component-here
v-for="(task, i) in tasks"
:prop="task.id"
.
.
.
/>
</draggable>
</table>
The sub-component will output a <tr> for each task.
Related
I'm creating my DataTable using static HTML output by a Django template.
I'd like to use the child rows feature, with:
All child rows visible by default
Child row HTML generated by a Django template
I can create child rows in the HTML <table>, but they of course get treated as main rows. How do I specify that a <tr> is a child row associated with the previous row?
e.g.
<table id="example" class="display" style="width:100%">
<tr><td>George Thomas</td><td>Age 45</td><td>200 lbs</td></tr>
<tr this-is-a-child-row=true>
<div>Child row for George Thomas!</div>
</tr>
<tr><td>Lucinda Thomas</td><td>Age 49</td><td>140 lbs</td></tr>
<tr this-is-a-child-row=true>
<div>Child row for Lucinda Thomas!</div>
</tr>
</table>
I am trying to populate table with an object which contains an array. I am able to successfully do that but I want each task name to have its own row right now they are coming in a single row.
{level_image :"image"level_name:"1"task_name: ["game","taskgame","jenga"]}
<tr v-for="tel in result" :key="tel.level_image" :pey="tel.level_name">
<td>{{tel.level_image}}</td>
<td>{{tel.level_name}}</td>
<td v-for="task in tel.task_name">{{task}}</td>
</tr>
You're missing the obvious: if you want each one to have its own row, you need to put the v-for in a <tr> tag (like you did for result). Exactly how you deal with the <td>s is up in the air, but it might go like this:
<tr v-for="tel in result" :key="tel.level_image" :pey="tel.level_name">
<tr v-for="task in tel.task_name">
<td>{{tel.level_image}}</td>
<td>{{tel.level_name}}</td>
<td>{{task}}</td>
</tr>
</tr>
Or if you mean you want each one to be on a separate line within a table cell, it could be
<tr v-for="tel in result" :key="tel.level_image" :pey="tel.level_name">
<td>{{tel.level_image}}</td>
<td>{{tel.level_name}}</td>
<td><div v-for="task in tel.task_name">{{task}}</div></td>
</tr>
The main idea is that you want the v-for to be associated with the type of tag that creates the entity you want each task in.
I have an issue with selecting a table to be read in Selenium.
I have a table in which there is two 'tr' elements inside the 'thead', and I need to find a way to ignore the first of these.
Here is the code:
<table class="noselect">
<thead>
<tr>
<th> </th>
<th class="number IOL">Interest Rates</th>
<th class="number IO">
</tr>
<tr>
<th>Description</th>
<th class="number">Value</th>
<th class="number">Percentage</th>
</tr>
</thead>
<tbody>
<tr>
<tr class="">
<tr class="">
<tr class="">
<tr>
<tr>
</tbody>
</table>
Using Selenium I will ask it to record the value of a certain row and column . This will then look at the Table element I will give it (hopefully using an XPath I can get working in this case), look at the thead and record the headers of each column. In this case that I am struggling with, the fact there is an extra 'tr' at the top of this table gets in the way of this process.
This is how the element is currently used:
[TableAlias("Detailed table")]
protected virtual IWebElement DetailedTable()
{
return Driver.FindElement(By.XPath("//table[#class='noselect']"));
}
I have tried many different ways which I can't get to work, but the gist of what I've been going for is:
//table[#class='noselect movements']/thead/tr/th[not(text()='Interest Rates')]/../../..
Here I'm stuck on going to the 'tr' element, telling it not to use it then backing out, but that selects it back again - and even that doesn't unselect the whole 'tr' element. It doesn't seem to help (to me) that the 'tr' element I'm trying to remove is blank with no class or defining features.
Is there a way of selecting the entire table except for the first 'tr' element in 'thead' as one element?
combine two xpathes. The 1st xpath take thead without the 1st tr and the 2nd tbody
//table/thead/tr[not(position()=1)] | //table/tbody
In your function that processes the THEAD tag, get the collection of TRs and start with [1] (skipping [0]) and process the rest.
HTML tables with system commands run long, as seen here:
https://help.ubuntu.com/community/SwitchingToUbuntu/FromLinux/RedHatEnterpriseLinuxAndFedora
Is there a Bootstrap3 way to make tables like these responsive, keeping the wide appearance for desktop and creating a mobile appearance that carries the context of the action and the OS vendor for each command without requiring scrolling?
you can use Contextual classes for styling bootstrap table row:
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
also, you can use non-standart thead repeating, not highly recommended but workes:
<table>
<thead> ... </thead>
<tbody> ... </tbody>
<thead> ... </thead>
<tbody> ... </tbody>
</table>
is there a way to add cells in a row column in html table without adding another table inside the row column
I have attached the image. and here is my code
<tr>
<tbody>
<td>Name</td>
<td><div id="span1">Units</div>
<div id="span2" class="side-border">price</div>
<div id="span2" class="r">value</div>
</td>
</tbody>
</tr>
If you want to have some different structure of your rows, you should check colspan and rowspan. The numbers should add up.
Example
<table border="1px">
<tr>
<td colspan="5">Hello</td>
<td>World</td>
</tr>
<tr>
<td rowspan="2">col 1</td>
<td colspan="4">CENTER</td>
<td>right</td>
</tr>
<tr>
<td colspan="3">Text</td>
<td colspan="3">bottom right</td>
</tr>
</table>
If you were to add the numbers from colspan they add to 6 and rowspan goes to 3. There are some things you have to take care of though. It's a little hard for me to explain now what those are, just try to visualise how you want your table to look, and then follow this:
The table should have the max number of rows
The table should have the max number of columns
rowspan used across table has to add up (more or less)
colspan used across table has to add up (more or less).
Follow that, and after writing the HTML for a few "complex" tables, you'll get the gist of it.