如何使数组元素在html的表格行中都可以单独点击

Question

假设我有一个字符串数组=[“resource1”、“resource2”、“resource3”]。 如何从 html 中的这些元素中创建一个表格行，其中行中的数据将由空格或逗号分隔，例如 resource1、resource2、resource3，然后能够分别单击这些元素？

我知道如何使用按钮标签使一些文本可点击，但我希望能够单独点击这些元素。 按钮标记使整行可单击，但我想在单击资源 1 时调用一个函数，然后在单击资源 2 时调用某个函数，依此类推。

编辑：我正在尝试使用 jsx 渲染此表。 所以我的 tableData 就像在一个名为 data= [{"id":1,"resources":"resource1,resource2,resource3"}] 的数组中，然后我尝试使用 jsx 作为

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

所以我希望能够分别点击resource1、resource2和resource3。

Answer 1

您可以使用逗号分隔符拆分字符串，并使用如下所示的onClick处理程序在span元素中显示每个项目。 尝试如下：

 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>

Answer 2

您只需为要单击的每个事物创建一个元素，然后每个元素都可以拥有自己的事件侦听器。 一个非常简单的例子是：

 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>