get data from html table in angular

get data from html table in angular - javascript

i am trying to get data from html table in angular.
component.html:
<div class="col-lg-6">
<table style="width: 90%;">
<tr>
<th
style="
border-left-color: white;
border-top-color: white;
"
></th>
<th class="t1">Name</th>
<th class="t1">Issue Date</th>
<th class="t1">Expiry Date</th>
<th class="t1">Add License</th>
</tr>
<tr *ngFor="let licence of licencesImages">
<!-- Licence Image -->
<td>
<img [src]="licence.path" style="max-width: 30px" />
</td>
<!-- Licence Name -->
<td>{{ getLicenceVehicleType(licence.name) }}</td>
<!-- Licence Issue Date -->
<td>
{{ getLicenceDate(licence.issued_date) }}
</td>
<!-- Licence Due Date -->
<td>{{ getLicenceDate(licence.due_date) }}</td>
<!-- Add Licence -->
<td>
<i
class="fa fa-plus-circle cursor-pointer"
aria-hidden="true"
style="color: green"
(click)="onAddLicense(output)"
></i>
</td>
</tr>
</table>
</div>
in component.ts:
onAddLicense(output) {
console.log(output)
}
my case is different from mat-table, in each row i have a button related to this row.
how i can get data from this row on click on button?
i try to replace output by $event.target.valuebut not work.

#op instead of doing like :
<i
class="fa fa-plus-circle cursor-pointer"
aria-hidden="true"
style="color: green"
(click)="onAddLicense(output)"
></i>
do it like :
<i
class="fa fa-plus-circle cursor-pointer"
aria-hidden="true"
style="color: green"
(click)="onAddLicense(licence)"
></i>

Related

Is there any way to align these values?

I have a datatable with a column that contains values of type integer, but when i show those values on my view numbers arent aligned well, so i have a value in a row = 600 and in another row = 1200 and the 6 of 600 is aligned with the thousand digit (1) instead with the hundreeds.
And this is my view with my data table:
<table id="example1" class="table table-striped table-responsive" width="100%">
<thead class="thead">
<tr>
<th style="display: none">Codigo</th>
<th>ID</th>
<th>Producto</th>
<th>Tipo de Producto</th>
<th>Marca</th>
<th>Modelo</th>
<th>Moneda de Compra</th>
<th class="quitarDecimales">Costo Total</th>
<th>Moneda de Venta</th>
<th class="quitarDecimales">Precio de Lista</th>
<th>Margen Bruto</th>
<th style="width: 12%">Accion</th>
</tr>
</thead>
<tbody>
#foreach($file as $key => $product)
#if($product->status == 1)
<tr>
<td style="display: none">{{ $key+1 }}</td>
<td>{{ $product->id }}</td>
<td>{{$product->marca->brandName . " " . $product->modelo->modelName}}</td>
<td>{{ $product['ptype']['productType']}}</td>
<td>{{ $product->marca->brandName }}</td>
<td>{{ $product->modelo->modelName}}</td>
<td>{{ $product->coin }}</td>
<td>{{ $product->costUSD }}</td>
<td>{{$product->sale_coin}}</td>
<td>{{$product->list_priceUSD}}</td>
<td>{{$product->marginUSD}}</td>
#php
$count_product = App\Model\Purchase::where('product_id',$product->id)->count();
#endphp
<td>
<!--<a title="Download" id="download" class="btn btn-sm btn-success"
href="/products/download/{{ $product->file }}"><i
class="fa fa-download"></i></a>-->
<a title="Edit" class="btn btn-sm text-white"
style="background-image: linear-gradient(200deg, #070525ce 1%, rgb(1, 0, 5)100%);"
href="{{ route('products.edit', $product->id) }}"><i
class="fa fa-edit"></i></a>
<a title="Delete" id="delete" class="btn btn-sm btn-danger"
href="{{ route('products.delete', $product->id) }}"><i
class="fa fa-trash"></i></a>
<a title="Info" id="info" class="btn btn-sm btn-info" href="{{route('products.detail', $product->id)}}" ><i class="fa fa-eye" ></i></a>
</td>
</tr>
#endif
#endforeach
</tbody>
</table>
So i tried doing this:
div tbody tr{
text-align: center;
}
Which aligns my number digits of the different rows in my table but my thead titles are not aligned. My values go too far to the right.

By default text is aligned to the left in tables which is what you are seeing above. If you want the numbers to be aligned correctly you need to add text-align:right; to the td elements which contain numbers.
It looks like you might be using BootStrap, in which case they already have a class you can use called text-right which will set the text-align to right.
If you are not using BootStrap you can add the class yourself like this:
<style>
.text-right{
text-align: right;
}
</style>
then add the class to the td elements as needed.

My stylesheet:
div tbody tr .numero{
text-align: right;
padding-right: 50px;
}
div tbody tr{
text-align: center;
}
div thead tr{
text-align: center;
}
My view:
<table id="example1" class="table table-striped table-responsive" width="100%">
<thead class="thead">
<tr>
<th style="display: none">Codigo</th>
<th>ID</th>
<th>Producto</th>
<th>Tipo de Producto</th>
<th>Marca</th>
<th>Modelo</th>
<th>Moneda de Compra</th>
<th class="quitarDecimales">Costo Total</th>
<th>Moneda de Venta</th>
<th class="quitarDecimales">Precio de Lista</th>
<th>Margen Bruto</th>
<th style="width: 12%">Accion</th>
</tr>
</thead>
<tbody>
#foreach($file as $key => $product)
#if($product->status == 1)
<tr>
<td style="display: none">{{ $key+1 }}</td>
<td>{{ $product->id }}</td>
<td>{{$product->marca->brandName . " " . $product->modelo->modelName}}</td>
<td>{{ $product['ptype']['productType']}}</td>
<td>{{ $product->marca->brandName }}</td>
<td>{{ $product->modelo->modelName}}</td>
<td >{{ $product->coin }}</td>
<td class="numero">{{ $product->costUSD }}</td>
<td>{{$product->sale_coin}}</td>
<td class="numero">{{$product->list_priceUSD}}</td>
<td class="numero">{{$product->marginUSD}}</td>
#php
$count_product = App\Model\Purchase::where('product_id',$product->id)->count();
#endphp
<td>
<!--<a title="Download" id="download" class="btn btn-sm btn-success"
href="/products/download/{{ $product->file }}"><i
class="fa fa-download"></i></a>-->
<a title="Edit" class="btn btn-sm text-white"
style="background-image: linear-gradient(200deg, #070525ce 1%, rgb(1, 0, 5)100%);"
href="{{ route('products.edit', $product->id) }}"><i
class="fa fa-edit"></i></a>
<a title="Delete" id="delete" class="btn btn-sm btn-danger"
href="{{ route('products.delete', $product->id) }}"><i
class="fa fa-trash"></i></a>
<a title="Info" id="info" class="btn btn-sm btn-info" href="{{route('products.detail', $product->id)}}" ><i class="fa fa-eye" ></i></a>
</td>
</tr>
#endif
#endforeach
</tbody>
</table>

Is there a way to combine these similar jQuery event listener functions?

I have multiple jquery event listener functions that either show or hide a checkmark button based on if there is any input in the input box. The functions are practically identical minus the ID names. I'm wondering if there's a way to combine these similar functions into one, maybe using a for loop or forEach method? Any advice on how to achieve this is greatly appreciated!
Code is listed down below but I also made a codepen sample.
$("#chwValue").on("input", function() {
$("#addChw").removeAttr("style");
if ($(this).val() === "") {
$("#addChw").hide();
}
});
$("#eleValue").on("input", function() {
$("#addEle").removeAttr("style");
if ($(this).val() === "") {
$("#addEle").hide();
}
});
$("#stmValue").on("input", function() {
$("#addStm").removeAttr("style");
if ($(this).val() === "") {
$("#addStm").hide();
}
});
$("#hhwValue").on("input", function() {
$("#addHhw").removeAttr("style");
if ($(this).val() === "") {
$("#addHhw").hide();
}
});
$("#gasValue").on("input", function() {
$("#addGas").removeAttr("style");
if ($(this).val() === "") {
$("#addGas").hide();
}
});
$("#wtrValue").on("input", function() {
$("#addWtr").removeAttr("style");
if ($(this).val() === "") {
$("#addWtr").hide();
}
});
$("#peakChwValue").on("input", function() {
$("#addPeakChw").removeAttr("style");
if ($(this).val() === "") {
$("#addPeakChw").hide();
}
});
$("#laborValue").on("input", function() {
$("#addLabor").removeAttr("style");
if ($(this).val() === "") {
$("#addLabor").hide();
}
});
.checkMark:hover {
cursor: pointer;
transition: transform 0.2s;
transform: scale(1.1)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<table id="tableData" class="table text-light text-end table-borderless inputTable">
<thead>
<tr class='text-center bordered'>
<th></th>
<th class="bordered" scope="col">CHW
<span class='units'>[tonhr]</span>
</th>
<th class="bordered" scope="col">ELE
<span class='units'>[kWh]</span>
</th>
<th class="bordered" scope="col">STM
<span class='units'>[lb]</span>
</th>
<th class="bordered" scope="col">HHW
<span class='units'>[mmbtu]</span>
</th>
<th class="bordered" scope="col">GAS
<span class='units'>[CCF]</span>
</th>
<th class="bordered" scope="col">WTR
<span class='units'>[kgal]</span>
</th>
<th class="bordered" scope="col">Peak CHW
<span class='units'>[ton]</span>
</th>
<th class="bordered" scope="col">Labor
<span class='units'>[Hours]</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<th style="width: 100px" class="bordered">Baseline</th>
<td class="text-center inputBorder">
<input type="text" id="chwValue" class="chwInput">
</td>
<td class="text-center inputBorder">
<input type="text" id="eleValue" class="eleInput">
</td>
<td class="text-center inputBorder">
<input type="text" id="stmValue" class="stmInput">
</td>
<td class="text-center inputBorder">
<input type="text" id="hhwValue" class="hhwInput">
</td>
<td class="text-center inputBorder">
<input type="text" id="gasValue" class="gasInput">
</td>
<td class="text-center inputBorder">
<input type="text" id="wtrValue" class="wtrInput">
</td>
<td class="text-center inputBorder">
<input type="text" id="peakChwValue" class="peakChwInput">
</td>
<td class="text-center inputBorder">
<input type="text" id="laborValue" class="laborInput">
</td>
</tr>
<tr class='text-center borderTop'>
<td></td>
<td>
<i id="addChw" style="display: none" class="far fa-check-circle fa-3x checkMark"></i>
</td>
<td>
<i id="addEle" style="display: none" class="far fa-check-circle fa-3x checkMark"></i>
</td>
<td>
<i id="addStm" style="display: none" class="far fa-check-circle fa-3x checkMark"></i>
</td>
<td>
<i id="addHhw" style="display: none" class="far fa-check-circle fa-3x checkMark"></i>
</td>
<td>
<i id="addGas" style="display: none" class="far fa-check-circle fa-3x checkMark"></i>
</td>
<td>
<i id="addWtr" style="display: none" class="far fa-check-circle fa-3x checkMark"></i>
</td>
<td>
<i id="addPeakChw" style="display: none" class="far fa-check-circle fa-3x checkMark"></i>
</td>
<td>
<i id="addLabor" style="display: none" class="far fa-check-circle fa-3x checkMark"></i>
</td>
</tr>
</tbody>
</table>

You can try something like this:
var mappings = { //Need a better name
'#chwValue': '#addChw',
'#hhwValue': '#addHhw'
// Add the rest of the mappings here
}
Object.keys(mappings).forEach(function(key) {
var value = mappings[key];
$(key).on("input", function() {
$(value).removeAttr("style");
if ($(this).val() === "") {
$(value).hide();
}
});
});

Give all the inputs a common class. Give them an attribute that refers to the related addXxx element.
$(".inputValue").on("input", function() {
let rel = $($(this).data("add"));
rel.removeAttr("style");
if ($(this).val() === "") {
rel.hide();
}
});
.checkMark:hover {
cursor: pointer;
transition: transform 0.2s;
transform: scale(1.1)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tableData" class="table text-light text-end table-borderless inputTable">
<thead>
<tr class='text-center bordered'>
<th></th>
<th class="bordered" scope="col">CHW
<span class='units'>[tonhr]</span>
</th>
<th class="bordered" scope="col">ELE
<span class='units'>[kWh]</span>
</th>
<th class="bordered" scope="col">STM
<span class='units'>[lb]</span>
</th>
<th class="bordered" scope="col">HHW
<span class='units'>[mmbtu]</span>
</th>
<th class="bordered" scope="col">GAS
<span class='units'>[CCF]</span>
</th>
<th class="bordered" scope="col">WTR
<span class='units'>[kgal]</span>
</th>
<th class="bordered" scope="col">Peak CHW
<span class='units'>[ton]</span>
</th>
<th class="bordered" scope="col">Labor
<span class='units'>[Hours]</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<th style="width: 100px" class="bordered">Baseline</th>
<td class="text-center inputBorder">
<input type="text" id="chwValue" class="chwInput inputValue" data-add="#addChw">
</td>
<td class="text-center inputBorder">
<input type="text" id="eleValue" class="eleInput inputValue" data-add="#addEle">
</td>
<td class="text-center inputBorder">
<input type="text" id="stmValue" class="stmInput inputValue" data-add="#addStm">
</td>
<td class="text-center inputBorder">
<input type="text" id="hhwValue" class="hhwInput inputValue" data-add="#addHhw">
</td>
<td class="text-center inputBorder">
<input type="text" id="gasValue" class="gasInput inputValue" data-add="#addGas">
</td>
<td class="text-center inputBorder">
<input type="text" id="wtrValue" class="wtrInput inputValue" data-add="#addWtr">
</td>
<td class="text-center inputBorder">
<input type="text" id="peakChwValue" class="peakChwInput inputValue" data-add="#addPeakChw">
</td>
<td class="text-center inputBorder">
<input type="text" id="laborValue" class="laborInput inputValue" data-add="#addLabor">
</td>
</tr>
<tr class='text-center borderTop'>
<td></td>
<td>
<i id="addChw" style="display: none" class="far fa-check-circle fa-3x checkMark">x</i>
</td>
<td>
<i id="addEle" style="display: none" class="far fa-check-circle fa-3x checkMark">x</i>
</td>
<td>
<i id="addStm" style="display: none" class="far fa-check-circle fa-3x checkMark">x</i>
</td>
<td>
<i id="addHhw" style="display: none" class="far fa-check-circle fa-3x checkMark">x</i>
</td>
<td>
<i id="addGas" style="display: none" class="far fa-check-circle fa-3x checkMark">x</i>
</td>
<td>
<i id="addWtr" style="display: none" class="far fa-check-circle fa-3x checkMark">x</i>
</td>
<td>
<i id="addPeakChw" style="display: none" class="far fa-check-circle fa-3x checkMark">x</i>
</td>
<td>
<i id="addLabor" style="display: none" class="far fa-check-circle fa-3x checkMark">x</i>
</td>
</tr>
</tbody>
</table>

To achieve this in a more DRY manner you can relate the cells in the columns by their index. When an input element raises an input event you can capture its index within the parent tr, then retrieve the corresponding icon cell from the following row by that same index. Something like this:
let $iconCells = $('.icon-row td');
$('.input-row input').on('input', e => {
let $input = $(e.target)
let index = $input.closest('td').index();
$iconCells.eq(index).find('i').toggle($input.val().length > 0);
});
.checkMark:hover {
cursor: pointer;
transition: transform 0.2s;
transform: scale(1.1)
}
.icon-row i {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<table id="tableData" class="table text-light text-end table-borderless inputTable">
<thead>
<tr class='text-center bordered'>
<th></th>
<th class="bordered" scope="col">
CHW
<span class='units'>[tonhr]</span>
</th>
<th class="bordered" scope="col">
ELE
<span class='units'>[kWh]</span>
</th>
<th class="bordered" scope="col">
STM
<span class='units'>[lb]</span>
</th>
<th class="bordered" scope="col">
HHW
<span class='units'>[mmbtu]</span>
</th>
<th class="bordered" scope="col">
GAS
<span class='units'>[CCF]</span>
</th>
<th class="bordered" scope="col">
WTR
<span class='units'>[kgal]</span>
</th>
<th class="bordered" scope="col">
Peak CHW
<span class='units'>[ton]</span>
</th>
<th class="bordered" scope="col">
Labor
<span class='units'>[Hours]</span>
</th>
</tr>
</thead>
<tbody>
<tr class="input-row">
<th style="width: 100px" class="bordered">Baseline</th>
<td class="text-center inputBorder">
<input type="text" name="chwValue" class="chwInput" />
</td>
<td class="text-center inputBorder">
<input type="text" name="eleValue" class="eleInput" />
</td>
<td class="text-center inputBorder">
<input type="text" name="stmValue" class="stmInput" />
</td>
<td class="text-center inputBorder">
<input type="text" name="hhwValue" class="hhwInput" />
</td>
<td class="text-center inputBorder">
<input type="text" name="gasValue" class="gasInput" />
</td>
<td class="text-center inputBorder">
<input type="text" name="wtrValue" class="wtrInput" />
</td>
<td class="text-center inputBorder">
<input type="text" name="peakChwValue" class="peakChwInput" />
</td>
<td class="text-center inputBorder">
<input type="text" name="laborValue" class="laborInput" />
</td>
</tr>
<tr class="text-center borderTop icon-row">
<td></td>
<td><i class="far fa-check-circle fa-3x checkMark"></i></td>
<td><i class="far fa-check-circle fa-3x checkMark"></i></td>
<td><i class="far fa-check-circle fa-3x checkMark"></i></td>
<td><i class="far fa-check-circle fa-3x checkMark"></i></td>
<td><i class="far fa-check-circle fa-3x checkMark"></i></td>
<td><i class="far fa-check-circle fa-3x checkMark"></i></td>
<td><i class="far fa-check-circle fa-3x checkMark"></i></td>
<td><i class="far fa-check-circle fa-3x checkMark"></i></td>
</tr>
</tbody>
</table>

Store the relationships in an array of objects and iterate through.
let objs = [
{'chwValue': 'addChw'},
{'eleValue': 'addEle'},
{'stmValue': 'addStm'},
{'hhwValue': 'addHhw'},
{'gasValue': 'addGas'},
{'wtrValue': 'addWtr'},
{'peakChwValue': 'addPeakChw'},
{'laborValue': 'addLabor'}];
objs.forEach(e => {
let [input, el] = Object.entries(e)[0];
$(`#${input}`).on("input", function() {
$(`#${el}`).removeAttr("style");
if ($(this).val() === "") $(`$${el}`).hide();
});
});
.checkMark:hover {
cursor: pointer;
transition: transform 0.2s;
transform: scale(1.1)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<table id="tableData" class="table text-light text-end table-borderless inputTable">
<thead>
<tr class='text-center bordered'>
<th></th>
<th class="bordered" scope="col">CHW
<span class='units'>[tonhr]</span>
</th>
<th class="bordered" scope="col">ELE
<span class='units'>[kWh]</span>
</th>
<th class="bordered" scope="col">STM
<span class='units'>[lb]</span>
</th>
<th class="bordered" scope="col">HHW
<span class='units'>[mmbtu]</span>
</th>
<th class="bordered" scope="col">GAS
<span class='units'>[CCF]</span>
</th>
<th class="bordered" scope="col">WTR
<span class='units'>[kgal]</span>
</th>
<th class="bordered" scope="col">Peak CHW
<span class='units'>[ton]</span>
</th>
<th class="bordered" scope="col">Labor
<span class='units'>[Hours]</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<th style="width: 100px" class="bordered">Baseline</th>
<td class="text-center inputBorder">
<input type="text" id="chwValue" class="chwInput">
</td>
<td class="text-center inputBorder">
<input type="text" id="eleValue" class="eleInput">
</td>
<td class="text-center inputBorder">
<input type="text" id="stmValue" class="stmInput">
</td>
<td class="text-center inputBorder">
<input type="text" id="hhwValue" class="hhwInput">
</td>
<td class="text-center inputBorder">
<input type="text" id="gasValue" class="gasInput">
</td>
<td class="text-center inputBorder">
<input type="text" id="wtrValue" class="wtrInput">
</td>
<td class="text-center inputBorder">
<input type="text" id="peakChwValue" class="peakChwInput">
</td>
<td class="text-center inputBorder">
<input type="text" id="laborValue" class="laborInput">
</td>
</tr>
<tr class='text-center borderTop'>
<td></td>
<td>
<i id="addChw" style="display: none" class="far fa-check-circle fa-3x checkMark"></i>
</td>
<td>
<i id="addEle" style="display: none" class="far fa-check-circle fa-3x checkMark"></i>
</td>
<td>
<i id="addStm" style="display: none" class="far fa-check-circle fa-3x checkMark"></i>
</td>
<td>
<i id="addHhw" style="display: none" class="far fa-check-circle fa-3x checkMark"></i>
</td>
<td>
<i id="addGas" style="display: none" class="far fa-check-circle fa-3x checkMark"></i>
</td>
<td>
<i id="addWtr" style="display: none" class="far fa-check-circle fa-3x checkMark"></i>
</td>
<td>
<i id="addPeakChw" style="display: none" class="far fa-check-circle fa-3x checkMark"></i>
</td>
<td>
<i id="addLabor" style="display: none" class="far fa-check-circle fa-3x checkMark"></i>
</td>
</tr>
</tbody>
</table>

How about this?
$("#chwValue, #eleValue, #stmValue, #hhwValue, #gasValue, #wtrValue, #peakChwValue, #laborValue").on("input", function() {
//get the id selector from the id value (everything before 'Value')
let idName = $(this).attr('id').split('Value')[0]
//capitalize the first character
idName = idName[0].toUpperCase() + idName.slice(1);
//add the id selector dynamically
$("#add"+idName).removeAttr("style");
if ($(this).val() === "") {
$("#add"+idName).hide();
}
});
$("#chwValue, #eleValue, #stmValue, #hhwValue, #gasValue, #wtrValue, #peakChwValue, #laborValue").on("input", function() {
//get the id selector from the id value (everything before 'Value')
let idName = $(this).attr('id').split('Value')[0]
//capitalize the first character
idName = idName[0].toUpperCase() + idName.slice(1);
//add the id selector dynamically
$("#add"+idName).removeAttr("style");
if ($(this).val() === "") {
$("#add"+idName).hide();
}
});
.checkMark:hover {
cursor: pointer;
transition: transform 0.2s;
transform: scale(1.1)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<table id="tableData" class="table text-light text-end table-borderless inputTable">
<thead>
<tr class='text-center bordered'>
<th></th>
<th class="bordered" scope="col">CHW
<span class='units'>[tonhr]</span>
</th>
<th class="bordered" scope="col">ELE
<span class='units'>[kWh]</span>
</th>
<th class="bordered" scope="col">STM
<span class='units'>[lb]</span>
</th>
<th class="bordered" scope="col">HHW
<span class='units'>[mmbtu]</span>
</th>
<th class="bordered" scope="col">GAS
<span class='units'>[CCF]</span>
</th>
<th class="bordered" scope="col">WTR
<span class='units'>[kgal]</span>
</th>
<th class="bordered" scope="col">Peak CHW
<span class='units'>[ton]</span>
</th>
<th class="bordered" scope="col">Labor
<span class='units'>[Hours]</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<th style="width: 100px" class="bordered">Baseline</th>
<td class="text-center inputBorder">
<input type="text" id="chwValue" class="chwInput">
</td>
<td class="text-center inputBorder">
<input type="text" id="eleValue" class="eleInput">
</td>
<td class="text-center inputBorder">
<input type="text" id="stmValue" class="stmInput">
</td>
<td class="text-center inputBorder">
<input type="text" id="hhwValue" class="hhwInput">
</td>
<td class="text-center inputBorder">
<input type="text" id="gasValue" class="gasInput">
</td>
<td class="text-center inputBorder">
<input type="text" id="wtrValue" class="wtrInput">
</td>
<td class="text-center inputBorder">
<input type="text" id="peakChwValue" class="peakChwInput">
</td>
<td class="text-center inputBorder">
<input type="text" id="laborValue" class="laborInput">
</td>
</tr>
<tr class='text-center borderTop'>
<td></td>
<td>
<i id="addChw" style="display: none" class="far fa-check-circle fa-3x checkMark"></i>
</td>
<td>
<i id="addEle" style="display: none" class="far fa-check-circle fa-3x checkMark"></i>
</td>
<td>
<i id="addStm" style="display: none" class="far fa-check-circle fa-3x checkMark"></i>
</td>
<td>
<i id="addHhw" style="display: none" class="far fa-check-circle fa-3x checkMark"></i>
</td>
<td>
<i id="addGas" style="display: none" class="far fa-check-circle fa-3x checkMark"></i>
</td>
<td>
<i id="addWtr" style="display: none" class="far fa-check-circle fa-3x checkMark"></i>
</td>
<td>
<i id="addPeakChw" style="display: none" class="far fa-check-circle fa-3x checkMark"></i>
</td>
<td>
<i id="addLabor" style="display: none" class="far fa-check-circle fa-3x checkMark"></i>
</td>
</tr>
</tbody>
</table>

Use jQuery to search value in a Bootstrap 4's Table inside a collapse

I'm using Bootstrap 4 table inside a collapse, I want to search for a value in the table and if the value is found, open the collapse and show me the row with the value.
<div id="collapseStudents" class="collapse ml-4" aria-labelledby="headingOne" data-parent="#accordionTypes">
<table class="table table-striped table-borderless">
<thead>
<tr>
<th scope="col" class="text border-bottom">N.</th>
<th scope="col" class="text border-bottom">Classe</th>
<th scope="col" class="text border-bottom">Nome e Cognome</th>
<th scope="col" class="text border-bottom">Ruoli</th>
</tr>
</thead>
<tbody>
{% for number, data in students_table.items() %}
<tr>
<th scope="row" class="text">{{number}}</th>
<td class="text"><span class="badge badge-secondary">{{data['class']}}</span></td>
<td class="text">{{data['name']}}</td>
<td class="text roles" style="width: 30%">
<span class="badge badge-danger align-text-top ml-1 admin-chip" style="display: {{none if not 'admin' in data['roles'] else block}}; position: relative; top: 2px;">Admin <a class="text-light chip" href=""><i class="fa fa-times" aria-hidden="true" style="position:relative;top:0.3px" data-role="admin" data-user="{{data['name'] + '-' +number}}"></i></a></span>
</td>
</tr>
{% endfor %}
</tbody>
</table>

You can try with the following script:
$('.table tbody').find('tr').each(function(){
$(this).find('td').each(function(){
if($(this:contains('valueToSearch'))){
$('#collapseStudents').collapse();
// here you can set how to show the row, ex. as bold text
$(this).text('<b>' + $(this).text() + '</b>');
}
});
});

Angularjs simple grid Table sort by last week

I want a button on-click I want to sort table with last week dates in angularjs. If this is my Angular view page.
<div class="form-inline has-feedback filter-header">
<input type="text" class="form-control" placeholder="Search" ng-model="search.$" />
<!-- <i class="glyphicon glyphicon-search form-control-feedback"></i> -->
<button class="btn btn-default btn-sm" ng-click="hideFilter=!hideFilter">Advanced Search</button>
</div>
<a class="btn btn-default btn-sm pull-right" href="/#/add">Add New</a>
</div> <!-- Grid filter ends -->
<table class="table table-striped table-condensed table-responsive table-hover">
<thead class="data-grid-header">
<!-- table header -->
<tr>
<th>
<span class="fa fa-th-large"></span>
Title
</th>
<th class="hidden-xs">
<span class="fa fa-calendar"></span>
Schedule Date
</th>
</tr>
<!-- table filter -->
<tr ng-hide="hideFilter">
<th><span ng-hide="hideFilter"><input type="text" ng-model="search.title"></span></th>
</tr>
</thead>
<tbody class="data-grid-data">
<tr ng-repeat="visit in visitsList | filter: dateRange | filter: search |orderBy:orderByField:reverseSort">
<td>{{visit.title}}</td>
<td>{{visit.startDate | date:medium}}
</tr>
</tbody>
</table>
dont know how to fill controller to sort last week .
do help thanks in advance

i want set default sort in angular js manage with icon

i am new in angular js. i already set sorting . when i set dafault setting that time my sorting arrow visible . i want to like default sorting with mange my icon. please help me on this. thanks in advance .
<table style="border: 1px solid " class="table table-striped">
<thead>
<tr>
<th ng-click="orderByField='JackpotAmount'; reverseSort = !reverseSort" class="link">
<a href="">
JackPot Amount <span ng-show="orderByField == 'JackpotAmount'"><span ng-show="!reverseSort" class="glyphicon glyphicon-chevron-up"></span><span ng-show="reverseSort" class="glyphicon glyphicon-chevron-down"></span></span>
</a>
<th ng-click="orderByField='StartDate'; reverseSort = !reverseSort" class="link">
<a href="">
Start Date <span ng-show="orderByField == 'StartDate'"><span ng-show="!reverseSort" class="glyphicon glyphicon-chevron-up"></span><span ng-show="reverseSort" class="glyphicon glyphicon-chevron-down"></span></span>
</a>
</th>
<th ng-click="orderByField='EndDate'; reverseSort = !reverseSort" class="link">
<a href="">
End Date <span ng-show="orderByField == 'EndDate'"><span ng-show="!reverseSort" class="glyphicon glyphicon-chevron-up"></span><span ng-show="reverseSort" class="glyphicon glyphicon-chevron-down"></span></span>
</a>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="jackpots1 in listjackpot|orderBy:sort:reverseSort">
<td>{{ jackpots1.JackpotAmount }}</td>
<td>{{ jackpots1.StartDate }}</td>
<td>{{ jackpots1.EndDate }}</td>
</tr>
</tbody>
</table>
below is my controller
$scope.orderByField = 'StartDate';
$scope.reverseSort = true;

You're close. The orderBy argument is the wrong variable name.
orderBy:orderByField:reverseSort
Instead of
orderBy:sort:reverseSort

We Keep Coding

JavaScript is the programming language of the Web.

get data from html table in angular - javascript

#op instead of doing like : <i class="fa fa-plus-circle cursor-pointer" aria-hidden="true" style="color: green" (click)="onAddLicense(output)" ></i> do it like : <i class="fa fa-plus-circle cursor-pointer" aria-hidden="true" style="color: green" (click)="onAddLicense(licence)" ></i>

Related

Is there any way to align these values?

Is there a way to combine these similar jQuery event listener functions?

Use jQuery to search value in a Bootstrap 4's Table inside a collapse

Angularjs simple grid Table sort by last week

i want set default sort in angular js manage with icon

Categories

Resources