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 >
<tr>
<th>
<div title="Date">Date</div>
</th>
<th>
<div title="File">File</div>
</th>
</tr>
</thead>
<tbody>
<tr >
<td data-val="2022-04-07 13:34:10" >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>" >
20220407_10_22_30_L100.SVL
<button type="button" data-val="20220407_10_22_30_L100.SVL">Download</button>
</td>
</tr>
<tr >
<td data-val="2022-04-07 13:34:16" >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>" >20220407_10_22_28_L100.CSV
<button type="button" data-val="20220407_10_22_28_L100.CSV">Download</button>
</td>
</tr>
<tr >
<td data-val="2022-04-07 13:34:41" >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>" >20220407_11_23_48_R14826.WAV
<button type="button" 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.
CodePudding user response：
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 >
<tr>
<th>
<div title="Date">Date</div>
</th>
<th>
<div title="File">File</div>
</th>
</tr>
</thead>
<tbody>
<tr >
<td >2022-04-07 13:34:10</td>
<td >
20220407_10_22_30_L100.SVL
<button type="button" data-val="20220407_10_22_30_L100.SVL">Download</button>
</td>
</tr>
<tr >
<td >2022-04-07 13:34:16</td>
<td >20220407_10_22_28_L100.CSV
<button type="button" data-val="20220407_10_22_28_L100.CSV">Download</button>
</td>
</tr>
<tr >
<td >2022-04-07 13:34:41</td>
<td >20220407_11_23_48_R14826.WAV
<button type="button" 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'));
});
});
CodePudding user response：
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"));
});
CodePudding user response：
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 >
<tr>
<th>
<div title="Date">Date</div>
</th>
<th>
<div title="File">File</div>
</th>
</tr>
</thead>
<tbody>
<tr >
<td data-val="2022-04-07 13:34:10" >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>" >
20220407_10_22_30_L100.SVL
<button type="button" data-val="20220407_10_22_30_L100.SVL">Download</button>
</td>
</tr>
<tr >
<td data-val="2022-04-07 13:34:16" >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>" >20220407_10_22_28_L100.CSV
<button type="button" data-val="20220407_10_22_28_L100.CSV">Download</button>
</td>
</tr>
<tr >
<td data-val="2022-04-07 13:34:41" >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>" >20220407_11_23_48_R14826.WAV
<button type="button" data-val="20220407_11_23_48_R14826.WAV">Download</button>
</td>
</tr>
</tbody>
</table>