Get text from first cell of row through button click?

44
January 05, 2019, at 5:40 PM

I have a table whose data is loaded dynamically, and I am also adding buttons to each row which I now want to have functionality. For this I need to get the text from the first cell on the row that is clicked.

I have tried several different code snippets but most return absolutely nothing.

https://gyazo.com/6fdcc9d93d2479e0067aea7bde6b3d95 This illustrates what I need to achieve, this when "Add comment" is clicked. The cell does not have any ID or specific class.

Answer 1

If I understand correctly I think this code might get you on the right track.

All I did was add an event listener to your table and implemented some event delegation (meaning event will bubble up the DOM tree and will be handled by a parent element - this reduces the number of event listeners needed in our code).

Generally, I wouldn't recommend to writing code like this. You should use real data structures to store and manipulate your data instead of having to hack away at a bunch of DOM elements and nodes. You might also want to consider looking to data-* attributes to suit your needs.

//A click event handler function 
const getFileId = e => { 
  if (e.target.type === 'button') { 
    const td = e.target.parentElement; 
    const tr = td.parentElement; 
    const [s] = tr.children; 
    return s.innerText 
  } 
  return null; 
}; 
 
//A reference to our table element 
const tableEl = document.querySelector('#tableEl'); 
 
//Set the click event handler function to fire whenever the table is clicked 
tableEl.addEventListener('click', e => { 
  const fileId = getFileId(e); 
  if (fileId) { 
    console.log(`Add comment to ${fileId}`); 
  } 
});
<table id="tableEl" border="1"> 
  <tr> 
    <th>File ID</th> 
    <th>File Name</th> 
    <th>Actions</th> 
  </tr> 
  <tr> 
    <td>108</td> 
    <td>FileA.txt</td> 
    <td><input type="button" value="Add Comment" /></td> 
  </tr> 
  <tr> 
    <td>109</td> 
    <td>FileB.txt</td> 
    <td><input type="button" value="Add Comment" /></td> 
  </tr> 
  <tr> 
    <td>110</td> 
    <td>FileC.txt</td> 
    <td><input type="button" value="Add Comment" /></td> 
  </tr> 
  <tr> 
    <td>111</td> 
    <td>FileD.txt</td> 
    <td><input type="button" value="Add Comment" /></td> 
  </tr> 
</table>

READ ALSO
How to get querystring parameter if it do not appear in URL?

How to get querystring parameter if it do not appear in URL?

Is there a way to access those query string parameters if they do not appear in the URL bar, but can be seen in "Network" tab?

32
Mixed default and named exports in Node with ES5 syntax

Mixed default and named exports in Node with ES5 syntax

All my experience with exporting/importing modules has come in ES6 using export and import, where you can do something like this to have a single module export a default function as well as separate named functions

56
How do I update input value when page reloads using localstorage?

How do I update input value when page reloads using localstorage?

When a user enters text into the input element, I want to be able to save what they type, so that if they refresh it will still be cached

26
How to retrain a neural network in Keras without restart the jupyter notebook?

How to retrain a neural network in Keras without restart the jupyter notebook?

I constructed a simple neural network using KerasAnd when I run it in jupyter notebook for the first time, I works perfectly well

61