Get data-val in the table using javascript - Jquery

user2631108
August 29, 2022
46 views
2 votes
4 Answers

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=&quot;button&quot; class=&quot;btn-sensor&quot; data-val=&quot;20220407_10_22_30_L100.SVL&quot;>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=&quot;button&quot; class=&quot;btn-sensor&quot; data-val=&quot;20220407_10_22_28_L100.CSV&quot;>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=&quot;button&quot; class=&quot;btn-sensor&quot; data-val=&quot;20220407_11_23_48_R14826.WAV&quot;>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.

Tags: javascript jquery

Answers

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'));
  }); 
});

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=&quot;button&quot; class=&quot;btn-sensor&quot; data-val=&quot;20220407_10_22_30_L100.SVL&quot;>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=&quot;button&quot; class=&quot;btn-sensor&quot; data-val=&quot;20220407_10_22_28_L100.CSV&quot;>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=&quot;button&quot; class=&quot;btn-sensor&quot; data-val=&quot;20220407_11_23_48_R14826.WAV&quot;>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>

- albert
- August 29, 2022 at 8:39 pm
- 0 votes
0
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"));
});
```
Login or Signup to reply.

<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>

Please signup or login to give your own answer.

Click here to cancel reply.

Get data-val in the table using javascript – Jquery

Answers