Dynamically lock tr at bottom of table - javascript

is there some way to lock a tr at the end of a table with VUE or Js?
I have a Vue-Component which adds tablerows dynamically based on an API call, but I need one specific tr to be at the bottom and if a new tr is added, it should be above the last one.
Not in the tfoot because there is some other nformation
Here is the Vue-Component
<tbody>
<tr is="deliverytable"
v-for="delivery in deliveries"
v-bind:key="delivery.id"
v-bind:delivery="delivery"></tr>
</tbody>
Template of the Vue-Component
<tr id="data" :class="{'incomplete' : delivery.event == '4'}">
<td>
<div v-if="delivery.is_printable">
<input name="deliverynote" :value="delivery.id" :checked="delivery.is_printable_by_default" type="checkbox">
</div>
</td>
<td>[[ delivery.dispatched ]] Uhr</td>
<td>[[ delivery.action ]]</td>
<td>
<div v-if="!delivery.is_deletable">[[ delivery.article_name ]]</div>
<div v-else-if="delivery.event != 0" v-on:change.close="autosave($event, delivery.id)" ref="article" v-html="delivery.articleform"></div>
</td>
<td>
<div v-if="!delivery.is_deletable">[[ delivery.amount ]]</div>
<div v-else-if="delivery.event != 0" #change="autosave($event, delivery.id)" ref="amount" v-html="delivery.amountform"></div>
</td>
<td><div id="weight" ref="delivery">[[delivery.weight]]</div></td>
<td class="d-none"><input type="text" name="delivery" id="id_delivery" :value="delivery.id">[[delivery.id]]</td>
<td id="price" ref="price">[[ delivery.price ]]</td><td v-else>0.00 €</td>
<td>
<a v-if="delivery.is_deletable" type="button" #click="removeDelivery(delivery.id)" class="icon icon-trash-can"></a>
</td>
</tr>

If your components iterated over in a loop you can render this specific after loop above
<table>
<thead>
some headers
</thead>
<tbody>
<tr v-for="(rowItem, key, index) in dataTable" :key="index">
your API call items
</tr>
<tr>
your specific item
</tr>
</tbody>
</table>

Related

How to get the td that contains tr with a button that has a specific attribute?

I'm trying to get all the tds in a table that contain a tr with a button to which I have specified an attribute ("boolean") with a true or false value. I need to get each td that have that attribute with value true but I can't figure out how to get it using jquery.
The structure would be the following:
<table id="table">
<thead>
</thead>
<tbody>
<tr row-id="1">
<td class="text-left">
<div />
</td>
<td class="text-left td-button">
<button boolean="true">Button</button>
</td>
</tr>
<tr row-id="2">
<td class="text-left">
<div />
</td>
<td class="text-left td-button">
<button boolean="false">Button</button>
</td>
</tr>
<tr row-id="3">
<td class="text-left">
<div />
</td>
<td class="text-left td-button">
<button boolean="true">Button</button>
</td>
</tr>
</tbody>
</table>
I have tried to do something like this:
function colour() {
$("#table tbody tr").each(function() {
let colour = $(this).children("td")[1];
}
}
But I can't go from there to get those td since I have no experience with jquery
How could I get the td with row-id 1 and 3 with Jquery and then apply a style to those td?
Thanks in advance
Use a has selector with attribute selector
var trs = $('tr:has(button[boolean="true"])');
console.log(trs);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
<thead>
</thead>
<tbody>
<tr row-id="1">
<td class="text-left">
<div />
</td>
<td class="text-left td-button">
<button boolean="true">Button</button>
</td>
</tr>
<tr row-id="2">
<td class="text-left">
<div />
</td>
<td class="text-left td-button">
<button boolean="false">Button</button>
</td>
</tr>
<tr row-id="3">
<td class="text-left">
<div />
</td>
<td class="text-left td-button">
<button boolean="true">Button</button>
</td>
</tr>
</tbody>
</table>
$("#table tbody tr").each(function() {
//Filter to iterate those td's which contain Boolean true
if($(this).find('button').attr('boolean')=="true"){
let colour = $(this).children("td")[1];
colour.style.backgroundColor="red";
console.log(colour);
}
})

table inside hidden div becomes visible upon appending tr dynamically

$("#zz").click(function() {
$(this).closest("tr").after("<tr><td colspan='2'></td><td colspan='7'>" + $(this).next().html() + "</td></tr>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<table>
<tr>
<td>
<button id="zz" >zz</button>
<div id="data_hidden" style="display:none">
<table>
<tr>
<td>
Hidden data appears
</td>
</tr>
</table>
</div>
</td>
<td>
1
</td>
<td>
2
</td>
<td>
3
</td>
</tr>
<tr>
<td>
4
<td>
<td>
5
<td>
<td>
6
<td>
</tr>
</table>
</body>
</html>
<tr role="row" class="odd">
<td class="sorting_1">
<img class="plus" id="plus" src="../Images/plus.png" style="width: 2em;">
<div style="display:none">
<table>
<thead class="bg-blue">
<tr>
<th></th>
<th>Established On</th>
<th>Objective</th>
<th>Target Value</th>
<th>Baseline Value</th>
<th>Monitorng mechanism</th>
<th>Target Date</th>
<th>Action Plan</th>
<th>Frequency of Evaluation</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img class="add" id="add" src="/Images/add.png" style="width: 2em;">
<div style="display:none">
<table>
<thead class="bg-blue">
<tr>
<th>
Objective Evaluated On
</th>
<th>
Objective Measured Value
</th>
<th>
From Period
</th>
<th>
To Period
</th>
<th>
Trend
</th>
<th>
NCR Ref. (If Objective not achieved)
</th>
<th>
Status of Objective Evaluation
</th>
<th>
Objective Evidence
</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="8">
<div style="text-align: center;">
<h4 style="color: grey;">No data exists</h4>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
<td>
09/07/2019 </td>
<td> ww</td>
<td> ww</td>
<td> ww</td>
<td> ww</td>
<td>
09/07/2019 </td>
<td>
<p>Not Available</p>
</td>
<td> Annually</td>
</tr>
</tbody>
</table>
</div>
</td>
<td>
1
</td>
<td>
<a data-toggle="popover" data-trigger="hover" href="/Objectives/ObjectivesDetails?Objectives_Id=3" id="3" onclick="HyperLinkProgressIconFunction()" data-original-title="" title="">ee</a>
</td>
<td>
2019
</td>
<td>
Department
</td>
<td>
HR DEPARTMENT
</td>
<td>
Shilpa jay bhat,Lavita p Pereira,chandramouli b cc
</td>
<td>
Approved
</td>
<td>
<span class="badge badge-info">No File attached</span>
</td>
<td>
<a href="/Objectives/ObjectivesEdit?Objectives_Id=3" title="Edit Objective details" onclick="HyperLinkProgressIconFunction()">
<span class="badge badge-info">Edit</span>
</a>
</td>
<td>
<span class="badge badge-danger" title="Delete Internal Document" onclick="DeleteItems(3)" style="cursor:pointer;">Delete</span>
</td>
</tr>
The above is just an example of a row from my table.
Upon appending $(this).closest("tr").after("<tr><td colspan='2'></td><td colspan='9'>" + $(this).next().html() + "</td></tr>"); on a button click the table becomes visible in the new <tr>
To my extend my knowledge , apparently it's been appended directly to tr since the display is set to none, does the dom elements work like this ?
I'm novice at the most, when it comes to html.
Can Anyone please explain why this happens ?
Any relevant information will greatly appreciated.
Your selection (using html()) returns the contents of the element, not the element itself, so any attributes on the element are also disregarded. One easy fix might be to move your hide styles down a level:
<div id="data_hidden">
<table style="display:none">
<tr>
<td>
Hidden data appears
</td>
</tr>
</table>
</div>
Demo 1
This leaves the original div element in the DOM, but it doesn't affect appearance.
Alternatively, grab the outerHTML of the selection's raw element:
$(this).closest("tr").after("<tr><td colspan='2'></td><td colspan='7'>"
+ $(this).next().get(0).outerHTML + "</td></tr>");
});
Demo 2

How to get the number of rows from nested table with Xpath?

I have the nested table below for which I want to store in a variable the number of rows in the second tbody.
The Xpath of main table and Xpath of the second table tbody are:
//*[#id="MainTable"]/table
//*[#id='MainTable']/table/tbody/tr/td/table[2]/tbody
Testing in Chrome Console with the code below, I'm getting successfully the second tbody so far.
function getElementByXpath(path) {
return document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
}
console.log( getElementByXpath("//*[#id='MainTable']/table/tbody/tr/td/table[2]/tbody") );
But I'm stuck in how to get the number of rows for this second tbody.
May someone help to achieve this getting the number of rows for this tbody or a better way to do it? Thanks for any help.
This is the HTML structure:
<table>
<tbody>
<tr>
<td id = "main">
<table id = "table_x">...</table>
<div>...</div>
<iframe>...<iframe>
<table class="table2_class" summary="MySummary">
<thead>...</thead>
<tbody>
<tr class="a1" >
<td class="td_class">1</td>
<td class="td_class">N</td>
<td class="td_class_1">
<div dir="" class="zzz">
<div class="div_class">
Some text
</div>
</div>
</td>
</tr>
<tr class="b1" >
<td class="td_class">4</td>
<td class="td_class">W</td>
<td class="td_class_1">
<div dir="" class="zzz">
<div class="div_class">
Some text
</div>
</div>
</td>
</tr>
<tr class="a1" >
<td class="td_class">7</td>
<td class="td_class">R</td>
<td class="td_class_1">
<div dir="" class="zzz">
<div class="div_class">
Some text
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Answering my own question.
This code it seems to work:
getElementByXpath("//*[#id='MainTable']/table/tbody/tr/td/table[2]/tbody").rows.length

Open page with a pre expanded table row

I have a bootstrap table with expandable rows, what I want is, opening the page with an already expanded row (say first row).
Below is the table I am using.
<table class="table no-padding-table">
<thead>
<tr>
<th>Date</th>
<th>Date2</th>
<th>Date3</th>
</tr>
<tbody>
<tr data-toggle="collapse" data-target="#extend{{$index}}"
ng-repeat-start="date in dates">
<td>
<p>{{date}}</p>
</td>
<td>
<p>{{date}}</p>
</td>
<td>
<p>{{date}}</p>
</td>
</tr>
<tr ng-repeat-end="">
<td colspan="3" class="hiddenRow">
<div class="accordian-body collapse">
TEST
</div>
</td>
</tr>
</tbody>

Create text boxes in table in angular on button click

I want to be able to click a button on a table and update the row information. I have the back-end all set up to do this. I am just having trouble being able to get at the table generated by angular. Here is my html template:
<br />
<table id="recordTable" border="1px">
<tr><td ng-repeat="column in columns"><strong>{{column.column_name}}</strong></td> </tr>
<tr ng-repeat="record in records">
<td ng-repeat="cell in record.cells"> {{cell}} </td>
<td><button ng-click="delete($index)">Delete</button></td>
<td><button ng-click="update($index)">Update</button></td>
</tr>
</table>
<br />
When I call the function update($index), I would like to be able to turn the text that is currently filled with {{column.column_name}} into a text input with the {{column.column_name}} as the default text. I could not find anything in the Docs for this. Any thoughts?
I've made a slight change to the record.cells array, now it is [{value : 'Value1'},{value : 'Value2'}]
<table id="recordTable" border="1px">
<tr>
<td ng-repeat="column in columns">
<strong>{{column.column_name}}</strong>
</td>
</tr>
<tr ng-repeat="record in records">
<td ng-repeat="cell in record.cells">
<span ng-show="mode != 'edit'">{{cell.value}}</span>
<input ng-show="mode == 'edit'" ng-model="cell.value" />
</td>
<td><button ng-click="delete($index)">Delete</button></td>
<td>
<button ng-show="mode != 'edit'" ng-click="mode = 'edit'">Update</button>
<button ng-show="mode == 'edit'" ng-click="mode = null">Save</button>
</td>
</tr>
</table>
Demo: Plunker

Categories