假设我有一个字符串数组=["resource1"、"resource2"、"resource3"].如何用html中的这些元素创建一个表行,其中行中的数据将由空格或逗号分隔,例如

我知道如何使用按钮标签使一些文本可单击,但我希望能够单独单击这些元素.button标记使整行都可以单击,但我想在单击resource1时调用一个函数,然后在单击resource2时调用一些函数,依此类推.

编辑:我正在try 使用jsx在react中呈现此表.因此,我的tableData类似于一个名为data=[{"id":1,"resources":"resource1,resource2,resource3"}的数组,然后我try 使用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.

推荐答案

您可以使用逗号分隔符拆分字符串,并使用onClick处理程序在span元素中显示每个项目,如下所示.try 以下操作:

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>

Javascript相关问答推荐

在open shadow—root中匹配时,使用jQuery删除一个封闭的div类

如何在ASP.NET中使用Google Charts API JavaScript将条形图标签显示为绝对值而不是负值

在Java中寻找三次Bezier曲线上的点及其Angular

为什么这个.add.group({})在教程中运行得很好,但在我的游戏中就不行了?

为什么可选参数的顺序会导致问题?

无法避免UV:flat的插值:非法使用保留字"

我想将Sitecore搜索面过滤器从多个转换为单个

按什么顺序接收`storage`事件?

将嵌套数组的元素乘以其深度,输出一个和

无法设置RazorPay订阅API项目价格

如何在Reaction中清除输入字段

在HTML中使用meta标记来指定定制元数据以用于使用JavaScript进行检索是不是一个坏主意?

如何按区域进行过滤并将其从结果数组中删除?

浮动标签效果移除时,所需的也被移除

我在JS代码中收到超过最大调用堆栈大小的错误,但我找不到原因.有谁能帮我搬一下吗?

改进了正则表达式的性能

在每次迭代中,JavaScript for循环会重新声明变量吗?

onmouseover事件在Edge浏览器中突然不起作用

刺激控制器操作在点击时触发两次

在Next.js v12.3.1和Reaction v18.2.0";中缩小了REACT错误#418和#423