ABCXYZ I want to be able to extract the text ABCXYZ and pass it to myFunction as an" /> ABCXYZ I want to be able to extract the text ABCXYZ and pass it to myFunction as an" /> ABCXYZ I want to be able to extract the text ABCXYZ and pass it to myFunction as an"/>

How to get the inner text of an anchor tag from a gridjs table

93 Views Asked by At

Consider an anchor tag for instance: <a href="/stats/ABCXYZ/1">ABCXYZ</a> I want to be able to extract the text ABCXYZ and pass it to myFunction as an argument. This anchor tag is one of the elements of the following gridjs table:

<script>
  new gridjs.Grid({
    columns: [
      { id: 'serial', name: 'Serial' },
      { id: 'version', name: 'Version' },
      { id: 'is_active', name: 'Active=1, Stopped=0' },
      { 
              id: 'action', 
              name: 'Stop',
              formatter: (cell, row) => {
                return gridjs.h('button', {
                  className: 'py-2 mb-4 px-4 border rounded-md text-white bg-blue-600',
                        onClick: () => myFunction(`"${row.cells[0].data}"`)
                }, 'Stop');
              }    
      },
    ],
    data: [
      {% for test in tests %}
        { serial: gridjs.html("<a href={{ url_for('stats.dash_stats', serial=test['device_serial'], test_id=test['id']) }}>{{ test['device_serial'] }}</a>"),
          version: "{{ test['version'] }}",
          is_active: "{{ test['is_active'] }}",
        },
      {% endfor %}
    ],
    search: {
      selector: (cell, rowIndex, cellIndex) => [0, 1, 2].includes(cellIndex) ? cell : null,
    },
    sort: true,
    pagination: true,
  }).render(document.getElementById('table'));
</script>

However, in myFunction the a tag object is not accessible. For instance, when I tried to query the href attribute or innerText, I get undefined logged in console:

      <script>
       function myFunction(serial) {
         let text = "Press a button!\nEither OK or Cancel.";


        console.log(serial.href) # undefined
        console.log(serial.innerText) # undefined
      }
      </script>

My goal is that myFunction is called with innerText of the anchor tag which ABCXYZ in this example.

0

There are 0 best solutions below