How to make array elements all separately clickable in table row in html-CodePudding

Suppose I have an array of strings=["resource1", "resource2", "resource3"]. How do I create a table row out of these elements in html where the data in the row will be separated by spaces or commas such as resource1,resource2,resource3 and then be able to click these elements separately?

I know how to make some text clickable by using button tag but I want to individually be able to click these elements. The button tag makes the entire row clickable but I want to call a function when I click resource1 and then call some function when I click on resource2 and so on.

EDIT: I'm trying to render this table in react using jsx. So my tableData is like in an array called data= [{"id":1,"resources":"resource1,resource2,resource3"}] and then I'm trying to create a table using jsx as

             <table>
              <tr>
                <th>ID</th>
                <th>Resources</th>
              </tr>
                {data.map((val, key) => {
                          return (
                            <tr key={key}>
                              <td>{val.id}</td>
                              <td>{val.resources}</td>
                            </tr>
                          )
                })}
            </table>

So I want to be able to separately click resource1, resource2 and resource3.

CodePudding user response：

You can split the string with a comma separator and show each item in a span element with an onClick handler like below. Try like below:

const data = [{ id: 1, resources: "resource1,resource2,resource3" }];

function App() {
  return (
    <table>
      <tbody>
        <tr>
          <th>ID</th>
          <th>Resources</th>
        </tr>
        {data.map((val, key) => {
          return (
            <tr key={key}>
              <td>{val.id}</td>
              <td>
                {val.resources.split(",").map((resource, index) => (
                  <span
                    key={index}
                    style={{ marginRight: "10px", cursor: "pointer" }}
                    onClick={() => {
                      alert(resource);
                    }}
                  >
                    {resource}
                  </span>
                ))}
              </td>
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

ReactDOM.render(<App />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>

CodePudding user response：

You just need to create an element for each thing you want to click, and then each one can have it's own event listener. A very simple example would be:

const cell = document.getElementById('target');

["resource1", "resource2", "resource3"].forEach((text) => {
    const link = document.createElement('a');
    link.addEventListener('click', function() {
        console.log(text)
    });
    link.href = '#'
    link.innerHTML = text;
    cell.appendChild(link);
    cell.appendChild(document.createTextNode(','));
});

<table border=1><tr><td id="target"></td></tr></table>