We Keep Coding

Get data-val in the table using javascript

I'm trying to analyze my code to make it work, but I'm not able to individually get the click on the button through data-val. Whenever I try, when I click it comes all the buttons at the same time. the code is:
<table>
<thead class="ip-table-header">
<tr>
<th>
<div title="Date">Date</div>
</th>
<th>
<div title="File">File</div>
</th>
</tr>
</thead>
<tbody>
<tr class="ip-table-row">
<td data-val="2022-04-07 13:34:10" class="ip-table-cell">2022-04-07 13:34:10</td>
<td data-val="20220407_10_22_30_L100.SVL<button type="button" class="btn-sensor" data-val="20220407_10_22_30_L100.SVL">Download</button>" class="ip-table-cell">
20220407_10_22_30_L100.SVL
<button type="button" class="btn-sensor" data-val="20220407_10_22_30_L100.SVL">Download</button>
</td>
</tr>
<tr class="ip-table-row">
<td data-val="2022-04-07 13:34:16" class="ip-table-cell">2022-04-07 13:34:16</td><td data-val="20220407_10_22_28_L100.CSV<button type="button" class="btn-sensor" data-val="20220407_10_22_28_L100.CSV">Download</button>" class="ip-table-cell">20220407_10_22_28_L100.CSV
<button type="button" class="btn-sensor" data-val="20220407_10_22_28_L100.CSV">Download</button>
</td>
</tr>
<tr class="ip-table-row">
<td data-val="2022-04-07 13:34:41" class="ip-table-cell">2022-04-07 13:34:41</td><td data-val="20220407_11_23_48_R14826.WAV<button type="button" class="btn-sensor" data-val="20220407_11_23_48_R14826.WAV">Download</button>" class="ip-table-cell">20220407_11_23_48_R14826.WAV
<button type="button" class="btn-sensor" data-val="20220407_11_23_48_R14826.WAV">Download</button>
</td>
</tr>
</tbody>
</table>
When clicking on the button Download, I need to call a method, but to be able to call this method, I need to know which button I'm clicking on, that is, the data-val works as if it were my id in this code.
var sensorDownload = $('.btn-sensor').attr("data-val");
console.log('SENSOR DOWNLOAD: ' + sensorDownload);
sensorDownload.on('click', function(ev){
ev.preventDefault();
console.log('CLICK HERE: ' + ev.target);
});
My idea is to get it by data-val, but if anyone has a better way to individually get this column so I can pass it via ajax to my method in the backend in php. I would be very grateful if someone could help me with options to do this.

Your approach seems a little confused. To do what you require you need to select the elements in the DOM. Using an attribute which contains the HTML matching those elements is not how this is done.
Using plain JS, you can use the querySelectorAll() method to retrieve the elements. From there you can use addEventListener() to add an event handler to the buttons. Finally you can get the data-val from the clicked element by using the target property of the event that's passed to the handler as an argument.
Try the following example - note that I removed the data attributes which are no longer needed.
document.querySelectorAll('.ip-table-row .btn-sensor').forEach(el => {
el.addEventListener('click', function(ev) {
ev.preventDefault();
console.log('CLICK HERE: ' + ev.target.dataset.val);
});
});
<table>
<thead class="ip-table-header">
<tr>
<th>
<div title="Date">Date</div>
</th>
<th>
<div title="File">File</div>
</th>
</tr>
</thead>
<tbody>
<tr class="ip-table-row">
<td class="ip-table-cell">2022-04-07 13:34:10</td>
<td class="ip-table-cell">
20220407_10_22_30_L100.SVL
<button type="button" class="btn-sensor" data-val="20220407_10_22_30_L100.SVL">Download</button>
</td>
</tr>
<tr class="ip-table-row">
<td class="ip-table-cell">2022-04-07 13:34:16</td>
<td class="ip-table-cell">20220407_10_22_28_L100.CSV
<button type="button" class="btn-sensor" data-val="20220407_10_22_28_L100.CSV">Download</button>
</td>
</tr>
<tr class="ip-table-row">
<td class="ip-table-cell">2022-04-07 13:34:41</td>
<td class="ip-table-cell">20220407_11_23_48_R14826.WAV
<button type="button" class="btn-sensor" data-val="20220407_11_23_48_R14826.WAV">Download</button>
</td>
</tr>
</tbody>
</table>
Finally, if you wanted to use jQuery for this then the equivalent logic would be this:
jQuery($ => {
$('.ip-table-row .btn-sensor').on('click', e => {
e.preventDefault();
console.log('CLICK HERE: ' + $(e.target).data('val'));
});
});

Move the .attr("data-val") from your variable and retrieve it in the click handler.
var sensorDownload = $('.btn-sensor');
console.log('SENSOR DOWNLOAD: ' + sensorDownload);
sensorDownload.on('click', function(ev){
ev.preventDefault();
console.log('CLICK HERE: ' + $(this).attr("data-val"));
});

I have modified your code so that it does console.log the data value for the button when you click on a button.
var sensorDownloads = document.querySelectorAll('.btn-sensor');
for(let i = 0; i < sensorDownloads.length; i++){
sensorDownloads[i].addEventListener('click', function(event){
console.log(event.target.dataset.val);
});
}
<table>
<thead class="ip-table-header">
<tr>
<th>
<div title="Date">Date</div>
</th>
<th>
<div title="File">File</div>
</th>
</tr>
</thead>
<tbody>
<tr class="ip-table-row">
<td data-val="2022-04-07 13:34:10" class="ip-table-cell">2022-04-07 13:34:10</td>
<td data-val="20220407_10_22_30_L100.SVL<button type="button" class="btn-sensor" data-val="20220407_10_22_30_L100.SVL">Download</button>" class="ip-table-cell">
20220407_10_22_30_L100.SVL
<button type="button" class="btn-sensor" data-val="20220407_10_22_30_L100.SVL">Download</button>
</td>
</tr>
<tr class="ip-table-row">
<td data-val="2022-04-07 13:34:16" class="ip-table-cell">2022-04-07 13:34:16</td><td data-val="20220407_10_22_28_L100.CSV<button type="button" class="btn-sensor" data-val="20220407_10_22_28_L100.CSV">Download</button>" class="ip-table-cell">20220407_10_22_28_L100.CSV
<button type="button" class="btn-sensor" data-val="20220407_10_22_28_L100.CSV">Download</button>
</td>
</tr>
<tr class="ip-table-row">
<td data-val="2022-04-07 13:34:41" class="ip-table-cell">2022-04-07 13:34:41</td><td data-val="20220407_11_23_48_R14826.WAV<button type="button" class="btn-sensor" data-val="20220407_11_23_48_R14826.WAV">Download</button>" class="ip-table-cell">20220407_11_23_48_R14826.WAV
<button type="button" class="btn-sensor" data-val="20220407_11_23_48_R14826.WAV">Download</button>
</td>
</tr>
</tbody>
</table>

<html>
<head><title>test</title></head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead class="ip-table-header">
<tr>
<th>
<div title="Date">Date</div>
</th>
<th>
<div title="File">File</div>
</th>
</tr>
</thead>
<tbody>
<tr class="ip-table-row">
<td class="ip-table-cell">2022-04-07 13:34:10</td>
<td class="ip-table-cell">
20220407_10_22_30_L100.SVL
<button type="button" class="btn-sensor" data-val="20220407_10_22_30_L100.SVL">Download</button>
</td>
</tr>
<tr class="ip-table-row">
<td class="ip-table-cell">2022-04-07 13:34:16</td>
<td class="ip-table-cell">20220407_10_22_28_L100.CSV
<button type="button" class="btn-sensor" data-val="20220407_10_22_28_L100.CSV">Download</button>
</td>
</tr>
<tr class="ip-table-row">
<td class="ip-table-cell">2022-04-07 13:34:41</td>
<td class="ip-table-cell">20220407_11_23_48_R14826.WAV
<button type="button" class="btn-sensor" data-val="20220407_11_23_48_R14826.WAV">Download</button>
</td>
</tr>
</tbody>
</table>
<script>
$('.btn-sensor').on('click', function(event){
console.log($(this).data('val'));
});
</script>
</body>
</html>

Div gets cloned multiple times instead of the required amount

I have some JSON data that contains four sections, and I want my html div to be cloned depending on how many sections there are. So if I have 100 sections in my JSON, the div should be cloned 100 times.
My div is getting cloned and the JSON data is getting appended to each one, but the problem is that the divs are getting cloned more than once. The first JSON section gets cloned 4x, the second one 3x, the third one 2x, etc. There's a pattern here but I'm not sure why it's happening.
JSON
JS snippet:
import $ from 'jquery';
import jsonData from "./test.json";
let onlyTitles = jsonData.d.results.filter(result => result.Title !== "");
onlyTitles.forEach(title => {
let $clonedDiv = $("#template").clone();
$clonedDiv.removeAttr("id");
$clonedDiv.find("#filledRowBody").append(`<td>${title.Title}</td><td>${title.Role}</td><td>${title.Office}</td><td>${title.IsActive}</td>`);
$clonedDiv.find("#filledRowBody").removeAttr("id");
$("#titleBody").append($clonedDiv);
})
HTML snippet:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="template" class="col-6">
<h3 id="display-form-job-title"></h3>
<div class="button-group">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Edit Form</button>
<!-- Button trigger PDF -->
<button type="button" class="btn btn-secondary" id="pdf-trigger" data-toggle="" data-target="#pdfprint">Save as PDF</button>
</div>
<hr>
<h4>Hiring Goals:</h4>
<div class="col-12">
<table class="table order-list" id="hiring-goals-table">
<thead>
<tr>
<td>Number of Hires</td>
</tr>
</thead>
<tbody class="tbody-hire">
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
<hr>
<h4>Open Searches:</h4>
<div class="col-12">
<table class="table order-list" id="role-table">
<thead>
<tr>
<td>Role</td>
<td>Location</td>
<td>Active</td>
</tr>
</thead>
<tbody class="tbody-search">
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
<h4>Roles Filled:</h4>
<div class="col-12">
<table class="table order-list" id="role-table">
<thead>
<tr>
<td class="thead-emp">Name</td>
<td class="thead-role-fill">Role</td>
<td class="thead-loc-fill">Location</td>
<td class="thead-act-fill">Active</td>
</tr>
</thead>
<tbody>
<tr id="filledRowBody">
</tr>
</tbody>
</table>
</div>
</div>
<div id="titleBody">
</div> <!-- col-6 -->

It turned out that #titleBody was inside of the col-6 div which somehow led to the duplications.

How to get one or more data when we do click in checkbox?

I have a problem , when i do click on one or select all , all data coming. But i need when I click on single checkbox then only that particular data should come.
html file
<div class="row">
<div class="col-md-12">
<h1>Student Information</h1>
<table id="example" class="table">
<tr>
<th>Name</th>
<th>Mobile</th>
<th>Siblling</th>
<th>select all <input type="checkbox" ng-click="vm.selectAll()"/></th>
</tr>
<tr ng-repeat="data in vm.data">
<td>{{data.name}}</td>
<td>{{data.mobileNumber}}</td>
<td>{{data.isMigrated}}</td>
<td><input type="checkbox" ng-model="data.selected" class="duplicateRow" /></td>
</tr>
<tr>
<tr>
<button class="button pull-right" ng-click="vm.process()">Process</button>
</tr>
</table>
<table class="table">
<tr>
<td colspan="4">
<pagination ng-if="renderpagination" page-number='{{vm.pageNumber}}' page-count="{{vm.pageCount}}" total-records="{{vm.totalRecords}}" api-url="duplicate-student"></pagination>
</td>
</tr>
</table>
</div>
</div>
Java script file
vm.selectAll =function(){
angular.forEach(vm.data, function(data){
data.selected=true;
});
}
vm.selectedUsers = [];
vm.process = function() {
vm.selectedUsers.splice(0, vm.selectedUsers.length);
for (var i in vm.data) {
vm.selectedUsers.push(vm.data[i]);
}
}

This link may what your looking for : Angular Checkboxes “Select All” functionality with only one box selected initially
.

Changing color of a <td> in a static HTML Table, depending if the BackEnd data is true or not in AngularJS without ng-Repeat

Warning: some words are in french in my code on pictures so I will explain what is about here
This is table I am trying to change the color depending on the true of false value
It is a simple disponibility schedule for each employees for the periods of AM,PM and Noon of a Day.
At this moment all I am trying to do is to displayed the values of, if someone is available at that period of this day,the the will turn turn green. In my database, each period displayed here are in bit values.
I will use the combo-box to switch employees(right now it display their ID but it only temporary )
The problem is, I can't get to display them properly, the values are incorrect ! So I am gonna post a paste bin of my code for this part right here.
<!-- The view code-->
<div class="row">
<div class="col-lg-10">
<div class="panel panel-default" style="margin-top:10px;">
<div class="panel-heading">
<b>Horraires des disponibilités </b>
</div>
<div class="panel-body">
<div class="col-lg-5">
<div >
<label> Employer </label>
<select ng-model="emp.EmployerID" ng-change="SelectedEmployer(emp.EmployerID)" class="form-control">
<option ng-repeat="emp in LesDisponibilites" >{{emp.EmployerID}}</option>
</select>
</div>
</div><div class="col-lg-6"><div class="dataTables_filter"><label><b>Search:</b><input type="search" class="form-control input-sm" placeholder="" aria-controls="dataTables-example"></label></div></div>
<!-- /.panel-heading -->
<div class="col-lg-10 ">
<div class="table-responsive">
<table class="table table-bordered table-hover table-striped">
<thead >
<tr>
<th>Jour</th>
<th>AM</th>
<th>PM</th>
<th>Soir</th>
</tr>
</thead>
<tbody >
<tr >
<td>Lundi</td>
<td ng-required="IsDispo(LesDisponibilites[Lindex].Lundi_AM)" style="background-color:{{DispoColor}};"></td>
<td ng-required="IsDispo(LesDisponibilites[Lindex].Lundi_PM)" style="background-color:{{DispoColor}};"></td>
<td ng-required="IsDispo(LesDisponibilites[Lindex].Lundi_Soir)" style="background-color:{{DispoColor}};"></td>
</tr>
<tr>
<td>Mardi</td>
<td ng-required="IsDispo(LesDisponibilites[Lindex].Mardi_AM)" style="background-color:{{DispoColor}};"></td>
<td ng-required="IsDispo(LesDisponibilites[Lindex].Mardi_PM)" style="background-color:{{DispoColor}};"></td>
<td ng-required="IsDispo(LesDisponibilites[Lindex].Mardi_Soir)" style="background-color:{{DispoColor}};"></td>
</tr>
<tr>
<td>Mercredi</td>
<td ng-required="IsDispo(LesDisponibilites[Lindex].Mercredi_AM)" style="background-color:{{DispoColor}};"></td>
<td ng-required="IsDispo(LesDisponibilites[Lindex].Mercredi_PM)" style="background-color:{{DispoColor}};"></td>
<td ng-required="IsDispo(LesDisponibilites[Lindex].Mercredi_Soir)" style="background-color:{{DispoColor}};"></td>
</tr>
<tr>
<td>Jeudi</td>
<td ng-required="IsDispo(LesDisponibilites[Lindex].Jeudi_AM)" style="background-color:{{DispoColor}};"></td>
<td ng-required="IsDispo(LesDisponibilites[Lindex].Jeudi_PM)" style="background-color:{{DispoColor}};"></td>
<td ng-required="IsDispo(LesDisponibilites[Lindex].Jeudi_Soir)" style="background-color:{{DispoColor}};"></td>
</tr>
<tr>
<td>Vendredi</td>
<td ng-required="IsDispo(LesDisponibilites[Lindex].Vendredi_AM)" style="background-color:{{DispoColor}};"></td>
<td ng-required="IsDispo(LesDisponibilites[Lindex].Vendredi_PM)" style="background-color:{{DispoColor}};"></td>
<td ng-required="IsDispo(LesDisponibilites[Lindex].Vendredi_Soir)" style="background-color:{{DispoColor}};"></td>
</tr>
<tr>
<td>Samedi</td>
<td ng-required="IsDispo(LesDisponibilites[Lindex].Samedi_AM)" style="background-color:{{DispoColor}};"></td>
<td ng-required="IsDispo(LesDisponibilites[Lindex].Samedi_PM)" style="background-color:{{DispoColor}};"></td>
<td ng-required="IsDispo(LesDisponibilites[Lindex].Samedi_Soir)" style="background-color:{{DispoColor}};"></td >
</tr>
</tbody>
</table>
</div>
<!-- /.table-responsive -->
</div>
</div>
<div class="panel-footer">
</div>
</div>
</div>
</div>
// Controller code
myappCtrl.controller('DisponibiliteCtrl', ['$scope', '$http', function ($scope, $http) {
var url = "http://localhost:64124/api/disponibilites"
$scope.DispoColor = "none";
$scope.LesDisponibilites = {};
$scope.Lindex = {};
// Récupère le date
$http.get(url).then(function (result) {
$scope.LesDisponibilites = result.data;
})
$scope.SelectedEmployer = function (index) {
console.log(index);
$scope.Lindex = index -1;
}
// Pour ajouter les couleurs qui indiques les disponibilités
$scope.IsDispo = function (Dispo ) {
if (Dispo == true) {
$scope.DispoColor = "#0ac20a";
}
else {
$scope.DispoColor = "none";
}
}
Also this is weird, but when I switch to ng-model instead of ng-required, It seems to show the correct data, but the console is going crazy with error, as ng-model should not be use for a Function.
I tried a lot of things and I am lost right now. I hope somebody here can help me.

You can use ng-style or ng-class to doing that.
ng-style="expression" or ng-class="expression"
In your case, as an example you can apply following way for your rows.
<td ng-style="LesDisponibilites[Lindex].Lundi_AM ? {'background-color':'#0ac20a'}:'none' ></td>

Try use ng-class property.
https://docs.angularjs.org/api/ng/directive/ngClass
<div class="table-responsive">
<table class="table table-condensed">
<thead>
<tr>
<th class="col-xs-4">COLUMN1</th>
<th class="col-xs-1">COLUMN2</th>
<th class="col-xs-1">COLUMN3</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="obj in anyObject" ng-class="{'info': obj.value1}">
<td class="col-xs-2">{{obj.value1}}</td>
<td class="col-xs-1">{{obj.value2}}</td>
<td class="col-xs-1">{{obj.value3}}</td>
</tr>
</tbody>
</table>
</div>

jQuery - toggle button show/hide table data

I'd like some help please.
<h2>Operating systems <span class="button small toggle-btn">Toggle</span></h2>
<table class="data" cellpadding="8" border="1">
<thead>
<tr>
<th class="first" style="width:120px">
Operating System </th>
<th class="">
Percentage </th>
</tr>
</thead>
<tbody>
<tr>
<td class="">iOS 8.4</td>
<td class="">
<div class="ui-percentage" style="width:17%">17 %</div>
</td>
</tr>
<tr class="tr even">
<td class="">iOS 8.3</td>
<td class="">
<div class="ui-percentage" style="width:6%">6 %</div>
</td>
</tr>
<tr>
<td class="">iOS 8.2</td>
<td class="">
<div class="ui-percentage" style="width:11%">11 %</div>
</td>
</tr>
<tr class="tr even">
<td class="">iOS 8.1.3</td>
<td class="">
<div class="ui-percentage" style="width:11%">11 %</div>
</td>
</tr>
<tr>
<td class="">iOS 8.1</td>
<td class="">
<div class="ui-percentage" style="width:6%">6 %</div>
</td>
</tr>
</tbody>
</table>
When the page loads for the first time I want the table to be collapsed. When I click the Toggle button I want to change the table status, so basically to expand it and collapse it again if the button is clicked again.
This is my script
<script>
$(document).ready(function() {
$('.toggle-btn').closest('table').hide(); // I want to target the table right after the button
$('.toggle-btn').on('click', function(event) {
$(this).closest('table').toggle();
});
});
</script>
How can I make this work correct ?

why not just use toggle function directly?
$(document).ready(function() {
$('table').hide();
$('.toggle-btn').on('click', function() {
$('table').toggle();
});
});

if you have only one table then only do
$(document).ready(function() {
$('tbody').closest('h2').next().find("tbody").hide();
$('.toggle-btn').on('click', function() {
$('tbody').toggle();
});
});
For more then one sibling tables
You can find closest h2 and next() gives you table
$(document).ready(function() {
$('.toggle-btn').closest('h2').next().find("tbody").hide();
$('.toggle-btn').on('click', function() {
$(this).closest('h2').next().find("tbody").toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Operating systems <span class="button small toggle-btn">Toggle</span></h2>
<table class="data" cellpadding="8" border="1">
<thead>
<tr>
<th class="first" style="width:120px">
Operating System </th>
<th class="">
Percentage </th>
</tr>
</thead>
<tbody>
<tr>
<td class="">iOS 8.4</td>
<td class="">
<div class="ui-percentage" style="width:17%">17 %</div>
</td>
</tr>
<tr class="tr even">
<td class="">iOS 8.3</td>
<td class="">
<div class="ui-percentage" style="width:6%">6 %</div>
</td>
</tr>
<tr>
<td class="">iOS 8.2</td>
<td class="">
<div class="ui-percentage" style="width:11%">11 %</div>
</td>
</tr>
<tr class="tr even">
<td class="">iOS 8.1.3</td>
<td class="">
<div class="ui-percentage" style="width:11%">11 %</div>
</td>
</tr>
<tr>
<td class="">iOS 8.1</td>
<td class="">
<div class="ui-percentage" style="width:6%">6 %</div>
</td>
</tr>
</tbody>
</table>

$(document).ready(function() {
$('.toggle-btn').parent().next('table').hide(); // I want to target the table right after the button
$('.toggle-btn').on('click', function(event) {
$(this).parent().siblings('table').toggle();
});
});
Selector should be $('.toggle-btn').parent().next('table')
DEMO

the function closest() goes up the element's parents, so it will never find the table. You would have to do something like this:
$(document).ready(function() {
$('.toggle-btn').parent().parent().find('table').hide(); // I want to target the table right after the button
$('.toggle-btn').on('click', function(event) {
$(this).parent().parent().find('table').toggle();
});
});
But this would not work if there are multiple tables. Consider using an id or for the table, so that you can access it directly. Eg:
<table id="data-table-1" class="data" cellpadding="8" border="1">
That would make the javascript much simpler, ie:
$('.toggle-btn').on('click', function(event) {
$('#data-table-1').toggle();
});