I have a button on a page that I want to only show rows that have a certain class (target-class in my example) within them. If you press the button again, then all rows are shown.
I'm not sure how to check if target-class is within <tr class="show-hide-this-one">
<button id="btn-toggle_target" type="button">Show Targets Only</button>
<table>
<tbody>
{% for item in first_list %}
<tr class="show-hide-this-one">
<td> {{ item.title }} </td>
<td>
<table><tbody>
{% for subitem in item.sublist %}
<tr>
<td>
{{ subitem.value }}
{% if value == 0 %}
<span class="target-class"> Looking for this one </span>
{% endif %}
</td>
</tr>
{% endfor %}
</tbody></table>
</td>
</tr>
{% endfor %}
</tbody>
</table>
<script type="text/javascript">
function toggleTarget() {
$btnToggle = $("#btn-toggle_target")
var showTargetOnly = $btnToggle.hasClass("target-only")
if (showTargetOnly) {
$btnToggle.html("Show Targets Only").removeClass("target-only");
$().show();
}
else {
$btnToggle.html("Show All Records").addClass("target-only");
$().hide();
}
}
(function () {
$("#btn-toggle_target").on('click', function() {
toggleTarget();
});
}());
</script>
it was not so easy because you dont have class or id but with a little loop its ok:
$("#btn-toggle_target").on('click', function() {
toggleTarget();
});
function toggleTarget() {
var showTargetOnly = $("#btn-toggle_target").hasClass("target-only");
if (showTargetOnly) {
$("#btn-toggle_target").html("Show Targets Only").removeClass("target-only");
$(".show-hide-this-one table tr").show();
}
else {
$("#btn-toggle_target").html("Show All Records").addClass("target-only");
$(".show-hide-this-one table td").each(function(){
if($(this).find(".target-class").length == 0) $(this).closest("tr").hide();
})
//this loop coul be replaced by
//$(".show-hide-this-one table td:not(:has(.target-class))").closest("tr").hide();
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn-toggle_target" type="button">Show Targets Only</button>
<table>
<tbody>
<tr class="show-hide-this-one">
<td> Item 1 </td>
<td>
<table><tbody>
<tr>
<td>
0
<span class="target-class"> Looking for this one </span>
</td>
</tr>
<tr>
<td>
1
</td>
</tr>
<tr>
<td>
3
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr class="show-hide-this-one">
<td> Item 2 </td>
<td>
<table><tbody>
<tr>
<td>
4
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody>
</table>
i think, you could replace this loop :
$(".show-hide-this-one table td").each(function(){
if($(this).find(".target-class").length == 0) $(this).closest("tr").hide();
})
by
$(".show-hide-this-one table td:not(:has(.target-class))").closest("tr").hide();
Related
I have a table and each row should link to a page.
I want to keep the structure of the html as is (not a bunch of divs and a grid like Wrapping HTML table rows in <a> tags)
Everything works with the javascript, but I am missing the bottom left tooltip that shows the url on hover from an tag. I also want the option to open in a new tab with CMD (mac) or CTRL (windows/linux).
I am currently doing the solution with jQuery:
$('.clickable-row').on('click', function () {
const url = $(this).attr('data-url')
if (typeof url === 'string') {
window.location.href = url
}
});
My html (twig):
<table class='table'>
<thead>
<tr>
{% for h in data.header %}
<th>{{h|trans}}</th>
{% endfor %}
</tr>
</thead>
<tbody>
{% for row in data.rows %}
{% set url = data.getOnClickURL(loop.index - 1) %}
<tr {% if url %} class='clickable-row' data-url="{{url}}" {% endif %}>
{% for r in row %}
<td>{{r|trans}}</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
try this solution without writing Javascript code using only HTML and CSS.
table {
width: 100%;
border-collapse: collapse;
}
table tr {
position: relative;
}
table tr td {
border: 1px solid black;
text-align: center;
}
table tr a {
position: absolute;
width: 100%;
display: block;
height: 100%;
top: 0px;
left: 0px;
}
<table>
<tr>
<td> 1 </td>
<td>2 </td>
<td>3 </td>
</tr>
<tr>
<td>1 </td>
<td>2 </td>
<td>3 </td>
</tr>
<tr>
<td>1 </td>
<td>2 </td>
<td>3 </td>
</tr>
<tr>
<td>1 </td>
<td>2 </td>
<td>3 </td>
</tr>
<tr>
<td>1 </td>
<td>2 </td>
<td>3 </td>
</tr>
</table>
I am working on Django framework and stuck in a bad situation. I have my Data table that is fetched from database and displaying in a table form. At the end of the table there are multiple checkboxes which is used to customize the data and display the only data for which I have clicked on single or multiple checkboxes. After clicking on checkbox / checkboxes data have to display in table form.
<head>
<script>
function getvalues()
{
let selected = new Array();
var chckbox = document.getElementById("tab1");
var selchk = chckbox.getElementsByTagName("input");
for(var i=0; i<selchk.length;i++)
{
if(selchk[i].checked)
{
selected.push(selchk[i].value);
}
}
if(selected.length> 0)
{
document.getElementById("displayvalues").innerHTML= selected;
}
};
</script>
</head>
<body>
<table border = "1">
<tr>
<th> ID </th>
<th> NAME </th>
<th> EMAIL </th>
<th> SALARY </th>
<th> PHONE </th>
</tr>
{%for getdata in EmployeeDetails %}
<tr>
<td> {{getdata.id}}</td>
<td> {{getdata.empname}}</td>
<td> {{getdata.email}}</td>
<td> {{getdata.salary}}</td>
<td> {{getdata.phone}}</td>
</tr>
{% endfor %}
</table>
<table id = "tab1">
<tr>
<td> {%for display in EmployeeDetails %}
<input type="checkbox" value="{{display.salary}}" /> {{display.salary}}
{% endfor %}
</td>
</tr>
</table>
<input id="but1" type="button" value="display records" onclick="getvalues()"/>
<b id="displayvalues"></b>
</body>
As you can see in image when I click on any checkbox It just gives me checkbox value not the entire row. I want entire row result by clicking on single or multiple checkboxes and it should display in form of table pertaining rows.
Kindly Help me to get out of this.
Your javascript function needs to find more than the checkbox value.
You also need the rows with the corresponding salary.
To achieve this, I would add a class corresponding to the salary on every row. Then I would use JavaScript's QuerySelectorAll to get every row with the class corresponding to the salary, hide every row and show the matching rows.
I added a "a" before every class because they can't start with a number.
function getvalues()
{
let checkboxes = document.getElementById("tab1");
let table = document.getElementById("table");
var selchk = document.getElementsByTagName("input");
let selected = [];
for(var i=0; i<selchk.length;i++)
{
if(selchk[i].checked)
{
selected.push(selchk[i].value);
}
}
var query = "#tr";
for(var j = 0; j < selected.length; j++) {
query = query + ", .a" + selected[j];
}
if (query !== "")
var rows = table.querySelectorAll(query); // Every element having a class corresponding to the salary you want
else var rows = [];
table.querySelectorAll("tr").forEach((r) => r.style.display = "none");
rows.forEach((r) => { // For every row r
r.style.display = ""; // Hide r
});
};
<table border = "1">
<tr>
<th> ID </th>
<th> NAME </th>
<th> EMAIL </th>
<th> SALARY </th>
<th> PHONE </th>
</tr>
<tr class="a12">
<td> 1</td>
<td> test</td>
<td> tset#test</td>
<td> 12</td>
<td> 0606060606</td>
</tr>
<tr class="a22">
<td> 2</td>
<td> test2</td>
<td> tse2t#test</td>
<td> 22</td>
<td> 0606060626</td>
</tr>
</table>
<table id = "tab1">
<tr>
<td>
<input type="checkbox" value="12" /> 12 </td>
<td>
<input type="checkbox" value="22" /> 22 </td>
</tr>
</table>
<table border = "1">
<tr>
<th> ID </th>
<th> NAME </th>
<th> EMAIL </th>
<th> SALARY </th>
<th> PHONE </th>
</tr>
<tbody id="table">
<tr class="a12">
<td> 1</td>
<td> test</td>
<td> tset#test</td>
<td> 12</td>
<td> 0606060606</td>
</tr>
<tr class="a22">
<td> 2</td>
<td> test2</td>
<td> tse2t#test</td>
<td> 22</td>
<td> 0606060626</td>
</tr>
</tbody>
</table>
<input id="but1" type="button" value="display records" onclick="getvalues()"/>
<b id="displayvalues"></b>
ISOLATED TEMPLATE FOR CLARITY :
<table border = "1">
<tr>
<th> ID </th>
<th> NAME </th>
<th> EMAIL </th>
<th> SALARY </th>
<th> PHONE </th>
</tr>
{%for getdata in EmployeeDetails %}
<tr class="a{{ getdata.salary }}">
<td> {{getdata.id}}</td>
<td> {{getdata.empname}}</td>
<td> {{getdata.email}}</td>
<td> {{getdata.salary}}</td>
<td> {{getdata.phone}}</td>
</tr>
{% endfor %}
</table>
<table id = "tab1">
<tr>
<td> {%for display in EmployeeDetails %}
<input type="checkbox" value="{{display.salary}}" /> {{display.salary}}
{% endfor %}
</td>
</tr>
</table>
<input id="but1" type="button" value="display records" onclick="getvalues()"/>
<b id="displayvalues"></b>
<table border = "1">
<tr>
<th> ID </th>
<th> NAME </th>
<th> EMAIL </th>
<th> SALARY </th>
<th> PHONE </th>
</tr>
<tbody id="table">
{%for getdata in EmployeeDetails %}
<tr class="a{{ getdata.salary }}">
<td> {{getdata.id}}</td>
<td> {{getdata.empname}}</td>
<td> {{getdata.email}}</td>
<td> {{getdata.salary}}</td>
<td> {{getdata.phone}}</td>
</tr>
{% endfor %}
</tbody>
</table>
</body>
I am using partially VueJS in Laravel.
In blade:
#foreach ($mileagelogv2 as $mileage)
<tr>
<td>#if(isset(json_decode($mileage->data)->driver_name) && !empty(json_decode($mileage->data)->driver_name))
{{json_decode($mileage->data)->driver_name}}
#else
--
#endif
</td>
<td>#if(isset(json_decode($mileage->data)->date) && !empty(json_decode($mileage->data)->date))
{{json_decode($mileage->data)->date}}
#else
--
#endif
</td>
<td>{{\Carbon\carbon::parse($mileage->created_at)->format('d/m/Y H:i:s')}}</td>
<td>{{$mileage->createdBy->name}}</td>
<td>
<a class="
list__item__actions__btn
list__item__actions__btn--edit
"
#click="updateMileageLogV2({{$mileage->id}}, $event)"
>
Complete
</a>
</td>
</tr>
#endforeach
Rendered Output:
<table class="mileagelogv2_panel">
<thead>
<tr>
<th>Driver Name</th>
<th>Date</th>
<th>Created At</th>
<th>Created By</th>
<th>Action</th>
</tr>
</thead>
<tbody class="mileagelogv2_panel">
<tr>
<td> Testing 2 u
</td>
<td> 10/08/2019
</td>
<td>10/08/2019 07:45:49</td>
<td>Gufran Hasan</td>
<td>
<a class="
list__item__actions__btn
list__item__actions__btn--edit
">
Complete
</a>
</td>
</tr>
<tr>
<td> Testing 2
</td>
<td> 10/08/2019
</td>
<td>10/08/2019 07:45:08</td>
<td>Gufran Hasan</td>
<td>
<a class="
list__item__actions__btn
list__item__actions__btn--edit
">
Complete
</a>
</td>
</tr>
<tr>
<td> Testing
</td>
<td> 10/08/2019
</td>
<td>10/08/2019 07:25:28</td>
<td>Gufran Hasan</td>
<td>
<a class="
list__item__actions__btn
list__item__actions__btn--edit
">
Complete
</a>
</td>
</tr>
</tbody>
</table>
In js file:
updateMileageLogV2: function updateMileageLogV2(id, event){
let item_id = id;
var $this = this;
$this.remove();
}
My question is:
When I click on Complete button then the corresponding row should delete.
But unfortunately it is not working.
Finally, I have found solution.
I write this line in VueJs method:
event.path[2].remove();
In VueJs Method:
updateMileageLogV2: function updateMileageLogV2(id, event){
let item_id = id;
event.path[2].remove();// remove current tr row on click.
}
Explanation:
See in screenshot, event.path has array of DOM list.
At 0 index a tag
At 1 index td tag
AT 2 index tr tag
please help me how to:
check all the siblings if the checkbox parent is check, and also if some child/children of a checkbox was checked, then the parent also must be checked. How can i do this?
i have this in my laravel code:
<table class="table table-hover" id="tableOrders">
<thead class="thead-inverse">
<tr>
<th width="4%"><input type="checkbox" id="selectAll" /></th>
<th width="7%">USER ID</th>
<th width="12%">AMOUNT</th>
<th width="15%">SHIP DATE</th>
<th width="15%">RECEIVER</th>
<th width="20%">ADDRESS</th>
<th width="14%">MOBILE #</th>
</tr>
</thead>
<tbody>
<?php $i=0 ?>
#foreach($shippings as $data)
<tr>
<td><input type="checkbox" class="parent" name="shippings[][]" value="{{ $data->shipping_id }}" /> </td>
<td> {{ $data->user_id }} </td>
<td> {{ $data->total_amount }} </td>
<td> {{ $data->shipping_date }} </td>
<td> {{ $data->shipping_receiver }} </td>
<td> {{ $data->shipping_address }} </td>
<td> {{ $data->mobile_number }} </td>
</tr>
<tr>
<td></td>
<td></td>
<td><p style="font-weight:bold;">Product Name</p></td>
<td><p style="font-weight:bold;">Price</p></td>
<td><p style="font-weight:bold;">Ordered Qty</p></td>
<td><p style="color:red;font-weight: bold;">Available Qty</p></td>
</tr>
#foreach($data->products as $product)
<tr>
<td></td>
<td><input type="checkbox" class="child" name="shippings[{{$i}}][products][]" value="{{ $product->product_id }}" /> </td>
<td>{{ $product->product_name }}</td>
<td>{{ $product->price }}</td>
<td>{{ $product->quantity }}</td>
<td><p style="color:red;"> {{ $product->available_qty }}</p></td>
</tr>
#endforeach
<?php $i++; ?>
#endforeach
</tbody>
</table>
I have my jsfiddle link:
http://jsfiddle.net/jKxNF/112/
I am very confused because i did it in my laravel loop, but the structure of it is in the jsfiddle.
I would add an attribute to the triggering checkboxes such as
<input type="checkbox" data-target=".prefix-{{ $data->shipping_id }}">
and using a class on the targeted <td>
<td class="prefix-{{ $data->shipping_id }}"><input type="checkbox">Sample3</td>
The following Javascript will select the relevant checkboxes
$(document).on('change', 'input[type="checkbox"]', function(e) {
var checked = $(this).prop('checked')
var target = $(this).data('target')
if(checked){
$(target).find('input').prop('checked', true)
} else {
$(target).find('input').prop('checked', false)
}
});
The data attribute value should be a selector, either #prefix-{{ $data->shipping_id }} if you use an ID or .prefix-{{ $data->shipping_id }} if you use a class
I have a table, within which I have a span element which I want to collapse expand when I click on the top row of the table. I am using the anuglar function collapse
So far this is working fine but if I have three identical tables, clicking one top row collapses all three of them.
Can I pass some unique identifier into the collpase function somehow?
HTML
<div ng-repeat="detail in details.detail">
<div class="my_table">
<table>
<tbody>
<tr class="top_row" ng-click="isCollapsed = !isCollapsed">
<td colspan="2">
<span class="f_name">
{{ details.f_name }}
</span>
<span class="l_name" >
{{ details.l_name }}
</span>
</td>
</tr>
<tr>
<td class="detail">
<span class="_address" collapse="isCollapsed">
{{ details.address }}
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
JS
function CollapseCtrl($scope) {
$scope.isCollapsed = false;
}
You can use special variable $index in ng-repeat and also use array for model
<div ng-repeat="detail in details.detail">
<div class="my_table">
<table>
<tbody>
<tr class="top_row" ng-click="isCollapsed[$index] = !isCollapsed[$index]">
<td colspan="2">
<span class="f_name">
{{ details.f_name }}
</span>
<span class="l_name" >
{{ details.l_name }}
</span>
</td>
</tr>
<tr>
<td class="detail">
<span class="_address" collapse="isCollapsed[$index]">
{{ details.address }}
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
function CollapseCtrl($scope) {
$scope.isCollapsed = [];
}