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>

How to edit table td value using jquery

I want to edit td values and I did it partialy but it's not working properly. Please help me.Here is my jsfiddle snippet:https://jsfiddle.net/rKF8a/34/
Note:No need contenteditable="true" option because IE will not support.
HTML:
<table id="elencoMezzi" width="100%">
<thead>
<tr><th>Field 1</th></tr>
</thead>
<tbody>
<tr>
<td><span>Value 1.1</span><span class="floatright closed"><button type="button" value="save" class="saveButton"/>Save</button></span></td>
</tr>
<tr>
<td><span>Value 1.2</span><span class="floatright closed"><button type="button" value="save" class="saveButton"/>Save</button></span></td>
</tr>
<tr>
<td><span>Value 1.3</span><span class="floatright closed"><button type="button" value="save" class="saveButton"/>Save</button></span></td>
</tr>
<tr>
<td><span>Value 1.4</span><span class="floatright closed"><button type="button" value="save" class="saveButton"/>Save</button></span></td>
</tr>
</tbody>
</table>
Js:
$(function(){
$("#elencoMezzi tr").click(function() {
$(this).find('td').find('span:eq(1)').css('display','block');
$(this).find('td').find('span:eq(1)').find('button').click(function() {
$(this).text("Saved");
setTimeout(function(){
$(this).parent('span').css('display','none');
}, 500);
});
});
});

Use contenteditable="true" to edit the content.The contenteditable attribute specifies whether the content of an element is editable or not.
$(function () {
$("#elencoMezzi tr").click(function() {
$(this).find('td').find('span:eq(1)').css('display','block');
$(this).find('td').find('span:eq(1)').find('button').click(function() {
$(this).text("Saved");
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="elencoMezzi" width="100%">
<thead>
<tr>
<th>
Field 1
</th>
</tr>
</thead>
<tbody>
<tr>
<td contenteditable="true">
<span>Value 1.1</span><span class="floatright closed"><button type="button" value="save" class="saveButton">Save</button></span>
</td>
</tr>
<tr>
<td contenteditable="true">
<span>Value 1.2</span><span class="floatright closed"><button type="button" value="save" class="saveButton">Save</button></span>
</td>
</tr>
<tr>
<td contenteditable="true">
<span>Value 1.3</span><span class="floatright closed"><button type="button" value="save" class="saveButton">Save</button></span>
</td>
</tr>
<tr>
<td contenteditable="true">
<span>Value 1.4</span><span class="floatright closed"><button type="button" value="save" class="saveButton">Save</button></span>
</td>
</tr>
</tbody>
Next option is replace td with input on click and reverse it to span on button click. Here is an example. Note: yo need to update as per your logic.
$(function () {
$("#elencoMezzi tr").each(function() {
edittd();
$(this).find('td').find('span:eq(1)').css('display','block');
$(this).find('td').find('.closed').find('button').on('click',function() {
var value = $(this).parent().prev('input').val();
$(this).parent().prev('input').replaceWith('<span class="value">' + value+ '</span>');
$(this).text("Saved");
edittd();
});
function edittd(){
$("td").find('.value').on('click', function(){
var value = $(this).text();
$(this).replaceWith('<input type="text" value="'+value+'">');
});
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="elencoMezzi" width="100%">
<thead>
<tr>
<th>
Field 1
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span class="value">Value 1.1</span><span class="floatright closed"><button type="button" value="save" class="saveButton">Save</button></span>
</td>
</tr>
<tr>
<td>
<span class="value">Value 1.2</span><span class="floatright closed"><button type="button" value="save" class="saveButton">Save</button></span>
</td>
</tr>
<tr>
<td>
<span class="value">Value 1.3</span><span class="floatright closed"><button type="button" value="save" class="saveButton">Save</button></span>
</td>
</tr>
<tr>
<td>
<span class="value">Value 1.4</span><span class="floatright closed"><button type="button" value="save" class="saveButton">Save</button></span>
</td>
</tr>
</tbody>

Edit option?
<TD> is not normally used for an editable field. It's a cell in a table for data being output. You can add the attribute contenteditable which works on anyone who got the latest version of their browser in like the last 5 years so that a large part of internet users but by no means all.
<TD contenteditable="true">
Perhaps you need an <input> field.
If that's not what you mean I don't understand your question. Consider re-writing it.

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>

How to use expressions inside ng-click and ng-show

I am trying to make a expandable rows to the table. I do not get any error messages but it is not working as expected. I suspect there is something wrong how I am using expressions with ng-show here?
plunker
my code:
<table class='table'>
<thead>
<tr>
<th>name</th>
<th>itemOne</th>
<th>itemTwo</th>
</tr>
</thead>
<tbody ng-repeat="data in tableData| orderBy:'-clintonValuemain'">
<tr>
<td>
<button ng-show="data.expand" ng-click='data.expand = true'>+</button>
<button ng-show="!data.expand" ng-click='data.expand = false'>-</button>
<input type="checkbox" class='checkbox'>
<a rel="noopener" target="_blank" href={{data.url}}>
{{data.name}}
</a>
</td>
<td>{{data.valueMain}}</td>
<td>{{data.tValue}}</td>
<tr>
<tr ng-show="data.expand" ng-repeat="subs in data.subvalues| orderBy:'-clintonValuesub'" >
<td>
{{subs.name}}
</td>
<td>
{{subs.valueSub}}
</td>
<td>
{{subs.tValue}}
</td>
</tr>
</tr>
</tr>
</tbody>
</table>

Try this out
<button ng-show="data.expand" ng-click='data.expand = false'>-</button>
<button ng-show="!data.expand" ng-click='data.expand = true'>+</button>
updated plunker
https://plnkr.co/edit/sJDFAp1KDvhYh8K3q7z2?p=preview

Get value from clicked button with modals

I have a list of elements in a table. If a button is clicked a modal pops up and to show some content in that modal i need to get the id of the element that was clicked. How can i do that?
<div id="collapseOne" class="accordion-body collapse">
<div class="accordion-inner">
<form action="" method="post">
<table class="table">
<thead>
<tr>
<td width="25%"><strong>Options</strong></td>
<td width="25%"><strong>Block id</strong></td>
<td width="25%"><strong>Block type</strong></td>
<td width="25%"><strong>Block order</strong></td>
</tr>
</thead>
<tbody>
<tr>
<td>
<button data-toggle="modal" id="editBlockBtn" data-target="#editBLock" data-block-id="8" class="btn btn-warning btn-mini"></button>
<button data-toggle="modal" id="editBlockBtn" data-target="#deleteBlock" data-block-id="8" class="btn btn-danger btn-mini"></button></td>
<td>8</td>
<td>image</td>
<td>1</td>
</tr>
<tr>
<td>
<button data-toggle="modal" id="editBlockBtn" data-target="#editBLock" data-block-id="9" class="btn btn-warning btn-mini"></button>
<button data-toggle="modal" id="deleteBlockBtn" data-target="#deleteBlock" data-block-id="9" class="btn btn-danger btn-mini"></button></td>
<td>9</td>
<td>image</td>
<td>2</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>

You can just write the ID again into a data-attribute on each button. Then you have easy access using jquery's data method. Like so:
PHP:
<button data-toggle="modal" data-target="#editBLock" data-block-id="<?php echo $block['id']; ?>" class="btn btn-warning btn-mini"><i class="icon-edit icon-white"></i></button>
JavaScript:
$('button').click(function() {
var clickedId = $(this).data('block-id');
});
If you can not change your PHP code, and the structure in your table is fixed, you can do it like this:
$('button').click(function() {
var clickedId = $(this).parent().next('td').text();
});

first: id="" is Unique, You can not use it twice in two elements. so change These to classes: editBlockBtn and deleteBlockBtn.
so if you want to get the <td>'s content It is better to add them a class like:
<td class="Block-id">9</td>
<td class="Block-type">image</td>
<td class="Block-order">2</td>
now You can easily get the closest() <tr> parent (or just use parent()):
$('.editBlockBtn').click(function() {
var parentTr = $(this).closest('tr');
});
then you can get the content:
var block_id = parentTr.find('.Block-id').text();
var block_type = parentTr.find('.Block-type').text();
var block_order = parentTr.find('.Block-order').text();
demo: http://jsfiddle.net/gbpkxbvv/