table inside hidden div becomes visible upon appending tr dynamically - javascript

$("#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

Related

Dynamically lock tr at bottom of table

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>

tbody focus does not work

I have the following table structure:
<table>
<tr>
<th> </th>
<th> </th>
<th> </th>
</tr>
<tbody id="page-1">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
<tbody id="page-2">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
I have tried the following jquery code to make scroll to specific tbody by id like:
page = 1;
$("#page-"+page).focus()
The above code failed to make scroll to the specified tbody. I also tried the following in order to get first tr but also failed:
page = 1;
$("#page-"+page+":first-child").focus()
The last thing that I have to mention, that tbody is loaded via ajax request and console.log($("#page-"+page).html()) works fine and prints out the html of the tbody
I have got the mistake. focus is not the suitable event for tbody in other words there is no point of focus for it. The solution is Run ScrollTop with offset of element by ID and using:
$('html, body').animate({
scrollTop: $('#page-'+page).offset().top -100
}, 2000);

Moving data betwen tables with "this"

I have a game that i'm working on and in it theres a shop that has two divs: a "Buy" section and a "Checkout". The first allows you to select different items and then move them into the "Checkout" using a button for each row. My problem is that i'm unsure how to move each selected row across to the second div (checkout).
Eg:
<!-- Shop Buy -->
<div id="buy">
<h3>Purchase</h3>
<table id="buyTable">
<th>Level Required</th><th>Item</th><th>Cost</th>
<tr><td>Level 1</td><td><img src="img/shop/pickaxe_rusty.png" id="item1"></td><td>50 Gold</td><td class="moveToCheckout">⇒</td></tr>
<tr><td>Level 10</td><td><img src="img/shop/pickaxe_iron.png" id="item2"></td><td>500 Gold</td><td class="moveToCheckout">⇒</td></tr>
<tr><td>Level 25</td><td><img src="img/shop/pickaxe_steel.png" id="item3"></td><td>5000 Gold</td><td class="moveToCheckout">⇒</td></tr>
</table>
</div>
The <td class="moveToCheckout">⇒</td>or ⇒ is what the user will click on to move the items across.
<!-- Shop Checkout -->
<div id="checkout">
<h3>Checkout</h3>
<table>
<th>Items</th><th>Quantity</th><th>Price</th>
<tr><td><img src="" id=""></td><td><input type="text" value="1" id="quantity"><td>X Gold</td></td></tr>
</table>
<div id="checkoutBoxes">
<span id="checkoutYes">✔</span>
<span id="checkoutNo">✘</span>
</div>
</div>
Additional info:
I have an array for each item with all the info for it (cost, level, img src), would it be possible to use this to create a new row in the checkout section and insert the details into it using a for loop?
I don't exactly understand what you want, but something like this should look close enough :
function buy(elem) {
$(elem).parents('tr').appendTo("#co-table");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Shop Buy -->
<div id="buy">
<h3>Purchase</h3>
<table id="buyTable">
<tr>
<th>Level Required</th>
<th>Item</th>
<th>Cost</th>
</tr>
<tr>
<td>Level 1</td>
<td>
<img src="img/shop/pickaxe_rusty.png" id="item1">
</td>
<td>50 Gold
<button onclick="buy(this)">Buy</button>
</td>
</tr>
<tr>
<td>Level 10</td>
<td>
<img src="img/shop/pickaxe_iron.png" id="item2">
</td>
<td>500 Gold
<button onclick="buy(this)">Buy</button>
</td>
</tr>
<tr>
<td>Level 25</td>
<td>
<img src="img/shop/pickaxe_steel.png" id="item3">
</td>
<td>5000 Gold
<button onclick="buy(this)">Buy</button>
</td>
</tr>
</table>
</div>
<!-- Shop Checkout -->
<div id="checkout">
<h3>Checkout</h3>
<table id="co-table">
<tr>
<th>Items</th>
<th>Quantity</th>
<th>Price</th>
</tr>
<tr>
<td>
<img src="" id="">
</td>
<td>X Gold</td>
<td>
<input type="text" value="1" id="quantity">
</td>
</tr>
</table>
<div id="checkoutBoxes">
<span id="checkoutYes">✔</span>
<span id="checkoutNo">✘</span>
</div>
</div>

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>

JQuery: Table Row Show/Hide based on Column Value

I have a table that has a column with Yes/No as possible values
<table id="mytable">
<thead>
<tr>
<th>
Col1
</th>
<th>
Col2
</th>
<th>
ActiveYN
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Apple
</td>
<td>
12345
</td>
<td>
Yes
</td>
</tr>
<tr>
<td>
Orange
</td>
<td>
67890
</td>
<td>
No
</td>
</tr>
<tr>
<td>
Mango
</td>
<td>
456745
</td>
<td>
Yes
</td>
</tr>
I need to show the row if ActiveYN is 'Yes' and Hide id ActiveYN is 'No'
How can i access the ActiveYN inside JQuery and show/hide accordingly?
DEMO
$('button').on('click', function () {
var $rowsNo = $('#mytable tbody tr').filter(function () {
return $.trim($(this).find('td').eq(2).text()) === "No"
}).toggle();
});
How about something like this: $('td:contains("No")').parent().hide();
Live Demo
JS
$('input').click(function(){
$('td:contains("No")').parent().toggle();
});
HTML
<input type='button' value='hide/show' />
<table id="mytable">
<thead>
<tr>
<th>
Col1
</th>
<th>
Col2
</th>
<th>
ActiveYN
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Apple
</td>
<td>
12345
</td>
<td>
Yes
</td>
</tr>
<tr>
<td>
Orange
</td>
<td>
67890
</td>
<td>
No
</td>
</tr>
<tr>
<td>
Mango
</td>
<td>
456745
</td>
<td>
No
</td>
</tr>
usually I would add this as an attribute on the row:
<tr data-active="No">
....
</tr>
Then to hide them all you can do:
$(function(){
$("[data-active=No]").hide();
});
Or you can add different classes/styles based on the value when it creates the table.
You can do it from server side itself.
#if (item.ActiveYN) {
<tr style="display: none;">
} else {
<tr>
}
I don't know the razor syntax, but you get the idea.
To be able to do it from client-side, add a class.
#if (item.ActiveYN) {
<tr class="hideMe">
} else {
<tr>
}
And then in jQuery:
$('.hideMe').hide();
Edited again after your question was edited, now if we forget the server-side altogether:
$("mytable").find("tr:contains('No')").hide();
Use this statement in your button click handler function. But, remember it will also find any text which contains "No" anywhere in a row. To make it more precise, use regular expressions to search exactly a "No".

Categories