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>

Submit all data from DataTable table with checkboxes using jQuery

So I have this Data Table [Fig. 1] inside a form which submits the table's data, the problem is it doesn't submit all the checked rows in all pages, it only submits what's shown. Then I found a way to fix that "code on[Fig. 2]" but now yes it submits all data from other pages but how can I like connect and submit layer_box's value with data-checkid's value.
The scenario is all the checked rows that'll be submitted will run a query like this
UPDATE table SET sub_group = **layer_box** WHERE id = **data-checkid's value**
[Fig.1]
<form method="POST" id="manage-layers" name="manage-layers">
<button class="btn btn-warning" type="submit" id="save_layers">
<i class="fa fa-save"></i>
<strong>Save</strong>
</button>
<table id="subgrp_layertbl" class="table table-responsive text-dark">
<thead class="thead-dark">
<tr>
<th scope="col">ID</th>
<th scope="col">Layer Name</th>
<th scope="col">Associate Layer</th>
</tr>
</thead>
<tbody>
<tr>
<td width="1%">1</td>
<td width="50%">Value 1</td>
<td width="30%">
<div class="text-center">
<input class="form-check-input layer_box" type="checkbox" name="layer_box" value="12,27" data-checkid="40" >
</div>
</td>
</tr>
<tr>
<td width="1%">3</td>
<td width="50%">Value 3</td>
<td width="30%">
<div class="text-center">
<input class="form-check-input layer_box" type="checkbox" name="layer_box" value="14" data-checkid="3" >
</div>
</td>
</tr>
<tr>
<td width="1%">8</td>
<td width="50%">Value 8</td>
<td width="30%">
<div class="text-center">
<input class="form-check-input layer_box" type="checkbox" name="layer_box" value="16" data-checkid="8" >
</div>
</td>
</tr>
</tbody>
</table>
</form>
[Fig.2]
<script type="text/javascript">
$(document).ready(function (){
var table = $('#subgrp_layertbl').DataTable();
$('#manage-layers').on('submit', function(e){
e.preventDefault();
var data = table.$('input,select,textarea').serializeArray();
console.log(data);
});
});
</script>

I really think this should answer your problem
https://stackoverflow.com/a/59550389/10888948 and just add other functions if you ever have more.

index class in different rows in jquery

I have a table with buttons on each row. I am trying to click on a button on a particular and it picks the value .claim_value field of the same row and put the value in the td opposite it .vet_value.
Here's my code
<table id="tasks" class="col-md-12 table">
<thead>
<tr>
<td>Service</td>
<td>Key notes</td>
<td>Claim Amount</td>
<td>Vetted Amount</td>
</tr>
</thead>
<tbody>
<tr class="therow">
<td class="claim_value">hey</td>
<td class="vet_value"></td>
<button class="button">button</button>
</tr>
<tr class="therow">
<td class="claim_value">you</td>
<td class="vet_value"></td>
<button class="button">button</button>
</tr>
<tr class="therow">
<td class="claim_value">me</td>
<td class="vet_value"></td>
<button class="button">button</button>
</tr>
<tr class="therow">
<td class="claim_value">them</td>
<td class="vet_value"></td>
<button class="button">button</button>
</tr>
</tbody>
</table>
so i want to be able to click on class="button"
$(".button").click(function(){
(".claim_value").val() of this same row goes into (".vet_value").val()
});

Just call parent() to access the parent <tr> element and modify <td> from there
$(".button").click(function(){
var $parent=$(this).parent();
var claimValue=$parent.find(".claim_value").text();
$parent.find(".vet_value").text(claimValue);
});

you don't need to use .val() unless the element is input or textarea
with td use .text() also you need to use $(this) to refer to the button you clicked and closest('tr') to select the closest row then .find() to find the element with class you want
$(".button").click(function(){
var claim_value = $(this).closest('tr').find(".claim_value").text();
$(this).closest('tr').find(".vet_value").text(claim_value);
});

Use html() that is not val(). Insert td inside which has to be the direct child of tr. As val() only comes for input and textarea.
$(".button").click(function(){
alert($(this).closest('tr').find(".claim_value").html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tasks" class="col-md-12 table">
<thead>
<tr>
<td>Service</td>
<td>Key notes</td>
<td>Claim Amount</td>
<td>Vetted Amount</td>
</tr>
</thead>
<tbody>
<tr class="therow">
<td class="claim_value">hey</td>
<td class="vet_value"></td>
<td>
<button class="button">button</button>
</td>
</tr>
<tr class="therow">
<td class="claim_value">you</td>
<td class="vet_value"></td>
<td>
<button class="button">button</button>
</td>
</tr>
<tr class="therow">
<td class="claim_value">me</td>
<td class="vet_value"></td>
<td>
<button class="button">button</button>
</td>
</tr>
<tr class="therow">
<td class="claim_value">them</td>
<td class="vet_value"></td>
<td>
<button class="button">button</button>
</td>
</tr>
</tbody>
</table>

Javascript :not selector not working

I have this javascript / jQuery which essentially wraps every 2 <td> elements with <div class="table-half">, however I specifically state in the variable that I do not want this to take effect if the table has a #profileContent parent.
var divs = $("div:not('#profileContent') table.form tr td");
for(var i = 0; i < divs.length; i+=2) {
divs.slice(i, i+2).wrapAll("<div class='table-half'></div>");
}
However, for some reason the wrapping still takes place with html in this structure:
<div id='profileContent'>
<table width="100%" class="form">
<tr>
<td></td>
<td></td>
</tr>
</table>
</div>
Any ideas why?

The reason it's not working is because your table is nested in multiple levels of DIV, and the selector is written to match a table that's any descendant of a DIV. The parent matches the ID, so the :not excludes it, but the grandparent does not have that ID, so it's it's not excluded.
Instead of putting the :not around the DIV id, put it around the selector for the table itself.
var divs = $("table.form:not(#clientsummarycontainer table) tr td");
.color {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="contentarea Client-Profile" id="contentarea" style="margin-left:209px;">
<div style="float:left;width:100%;">
<h1>Client Profile</h1>
<div class="tab-content client-tabs">
<li class="dropdown pull-right tabdrop hide"><a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-align-justify"></i> <b class="caret"></b></a>
<ul class="dropdown-menu"></ul>
</li>
<div class="tab-pane active" id="profileContent">
<div id="clientsummarycontainer">
<div class="clearfix">
</div>
<p align="right">
<input type="button" value="Status Filter: Off" class="btn btn-xs btn-small" onclick="toggleStatusFilter()">
</p>
<div id="statusfilter">
<form>
<div class="checkall">
<label class="checkbox-inline">
<input type="checkbox" id="statusfiltercheckall" onclick="checkAllStatusFilter()" checked=""> Check All</label>
</div>
</form>
</div>
<form method="post" action="/redacted/clientssummary.php?userid=redacted&action=massaction">
<input type="hidden" name="token" value="redacted">
<table width="100%" class="form">
<tbody>
<tr>
<td colspan="2" class="fieldarea" style="text-align:center;"><strong>Products/Services</strong></td>
</tr>
<tr>
<td align="center">
<div class="tablebg">
<table class="datatable" width="100%" border="0" cellspacing="1" cellpadding="3">
<tbody>
<tr>
<th width="20">
<input type="checkbox" id="prodsall">
</th>
<th>ID</th>
<th>Product/Service</th>
<th>Amount</th>
<th>Billing Cycle</th>
<th>Signup Date</th>
<th>Next Due Date</th>
<th>Status</th>
<th width="20"></th>
</tr>
<tr>
<td>
<input type="checkbox" name="selproducts[]" value="redacted" class="checkprods">
</td>
<td>redacted</td>
<td style="padding-left:5px;padding-right:5px">redacted 7 Day Free Trial - (No Domain)</td>
<td>$0.00 USD</td>
<td>Free</td>
<td>01/06/2016</td>
<td>-</td>
<td>Active</td>
<td>
<img src="images/edit.gif" width="16" height="16" border="0" alt="Edit">
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<table width="100%" class="form">
<tbody>
<tr>
<td colspan="2" class="fieldarea" style="text-align:center;"><strong>Addons</strong></td>
</tr>
<tr>
<td align="center">
<div class="tablebg">
<table class="datatable" width="100%" border="0" cellspacing="1" cellpadding="3">
<tbody>
<tr>
<th width="20">
<input type="checkbox" id="addonsall">
</th>
<th>ID</th>
<th>Name</th>
<th>Amount</th>
<th>Billing Cycle</th>
<th>Signup Date</th>
<th>Next Due Date</th>
<th>Status</th>
<th width="20"></th>
</tr>
<tr>
<td colspan="9">No Records Found</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<table width="100%" class="form">
<tbody>
<tr>
<td colspan="2" class="fieldarea" style="text-align:center;"><strong>Domains</strong></td>
</tr>
<tr>
<td align="center">
<div class="tablebg">
<table class="datatable" width="100%" border="0" cellspacing="1" cellpadding="3">
<tbody>
<tr>
<th width="20">
<input type="checkbox" id="domainsall">
</th>
<th>ID</th>
<th>Domain</th>
<th>Registrar</th>
<th>Registration Date</th>
<th>Next Due Date</th>
<th>Expiry Date</th>
<th>Status</th>
<th width="20"></th>
</tr>
<tr>
<td colspan="9">No Records Found</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<table width="100%" class="form">
<tbody>
<tr>
<td colspan="2" class="fieldarea" style="text-align:center;"><strong>Current Quotes</strong></td>
</tr>
<tr>
<td align="center">
<div class="tablebg">
<table class="datatable" width="100%" border="0" cellspacing="1" cellpadding="3">
<tbody>
<tr>
<th>ID</th>
<th>Subject</th>
<th>Date</th>
<th>Total</th>
<th>Valid Until Date</th>
<th>Status</th>
<th width="20"></th>
</tr>
<tr>
<td colspan="7">No Records Found</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<div class="btn-container">
<div class="button-container">
<input type="button" id="massUpdateItems" value="Mass Update Items" class="button btn btn-default" onclick="$('#massupdatebox').slideToggle()">
<input type="submit" name="inv" value="Invoice Selected Items" class="button btn btn-warning">
<input type="submit" name="del" value="Delete Selected Items" class="button btn btn-danger">
</div>
</div>
</form>
</div>
<script language="javascript">
$(document).ready(function() {
$("#prodsall").click(function() {
$(".checkprods").attr("checked", this.checked);
});
$("#addonsall").click(function() {
$(".checkaddons").attr("checked", this.checked);
});
$("#domainsall").click(function() {
$(".checkdomains").attr("checked", this.checked);
});
});
</script>
</div>
</div>
</div>
<div class="clear"></div>
</div>

After a few more hours of playing around, I finally figured out something that works, although I don't know if it's really the best way of accomplishing what I'm after (I'm thinking it's probably not) nor do I know how efficient it is:
var divs = $("table.form tr td");
for(var i = 0; i < divs.length; i+=2) {
if ($('table.form').parents('#clientsummarycontainer').length == 0) {
divs.slice(i, i+2).wrapAll("<div class='table-half'></div>");
}
}

.next(".myClass") Not Working Jquery

I don't know how to access the value that I want I've tried a lot of things but I don't know how to find my value.
Here is my HTML:
<table class="liste">
<tbody>
<tr>
<th>Actions</th>
<th>Nom</th>
<th>Coordonnées</th>
<th>Diplômes</th>
<th>Profil associé</th>
</tr>
<tr>
<td class="groupe" colspan="5">2014-2015
<button class="copyMails" title="Copier les adresses emails">
<img src="/images/picto/action_dupliquer.png" alt="">
Copier les adresses emails
</button>
</td>
</tr>
<tr>
<td>
<input type="text" class="lstMails" value="myText">
</td>
</tr>
<tr>
<th>Actions</th>
<th>Nom</th>
<th>Coordonnées</th>
<th>Diplômes</th>
<th>Profil associé</th>
</tr>
<tr>
<td class="groupe" colspan="5">2014-2015
<button class="copyMails" title="Copier les adresses emails">
<img src="/images/picto/action_dupliquer.png" alt="">
Copier les adresses emails
</button>
</td>
</tr>
<tr>
BLABLABLA
</tr>
<tr>
BLABLABLA
</tr>
<tr>
<td>
<input type="text" class="lstMails" value="myText2">
</td>
</tr>
</tbody>
</table>
Here is my JS:
$("body").on('click', ".copyMails", function() {
console.log($(this).parent().parent().parent().next('.lstMails').val());
});
I've tried with and with parent with more and less etc. But I don't know how to do this.
I want to access the next .lstMails when I click on the button .copyMails

You should use closest() to navigate parent tr then use next() to point to next tr then you can use find()
Use
$("body").on('click', ".copyMails",function(){
console.log($(this).closest('tr').next('tr').find('.lstMails').val());
});
Update
$("body").on('click', ".copyMails", function() {
alert($(this).closest('tr').nextAll('tr:has(.lstMails)').find('.lstMails').val());
});

You need to find the next tr sibling and then the lstMails element inside it
$("body").on('click', ".copyMails", function() {
$('#log').html($(this).closest('tr').nextAll('tr:has(.lstMails)').first().find('.lstMails').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="liste">
<tbody>
<tr>
<th>Actions</th>
<th>Nom</th>
<th>Coordonnées</th>
<th>Diplômes</th>
<th>Profil associé</th>
</tr>
<tr>
<td class="groupe" colspan="5">2014-2015
<button class="copyMails" title="Copier les adresses emails">
<img src="/images/picto/action_dupliquer.png" alt="">Copier les adresses emails
</button>
</td>
</tr>
<tr>
<td>
<input type="text" class="lstMails" value="myText">
</td>
</tr>
<tr>
<th>Actions</th>
<th>Nom</th>
<th>Coordonnées</th>
<th>Diplômes</th>
<th>Profil associé</th>
</tr>
<tr>
<td class="groupe" colspan="5">2014-2015
<button class="copyMails" title="Copier les adresses emails">
<img src="/images/picto/action_dupliquer.png" alt="">Copier les adresses emails
</button>
</td>
</tr>
<tr>
<td>BLABLABLA</td>
</tr>
<tr>
<td>BLABLABLA</td>
</tr>
<tr>
<td>
<input type="text" class="lstMails" value="myText2">
</td>
</tr>
</tbody>
</table>
<div id="log"></div>
Your code is getting the tbody ancestor of the clicked button, then trying to find the next sibling which has class lstMails - that is not what you are after.