动态 table 的可扩展行

Question

在我的 Reactjs 应用程序中，我有一个 table。我正在使用 javascript 的地图函数来填充行。这意味着我的行是动态呈现的。我是这样做的

<tbody>
  { this.state.MediaFiles.map((item, i) => (
  <tr id={i}>
    <td className="v-align-middle">
      <div className="checkbox">
        <input type="checkbox" value="3" id={ "checkbox1" + i}/>
        <label htmlFor={ "checkbox1" + i} onClick={()=> this.handleCheckboxClick(i,item.url, item.poster.list_thumbnail)}/>
      </div>
    </td>
    <td className="v-align-middle semi-bold">
      <div className='file-image'
      style={{backgroundImage: `url('${item.poster.list_thumbnail}')`}}/>
        <div className="movie-title">
          <span className="movie-name">
            <a onClick={this.showVideo(item.url, item.file, item.id, item.title, item.duration, item.height, item.width, item.frame_rate)}>{item.title}</a>
          </span>
          <br/>
          <span className="movie-info">Movie Trailer</span>
        </div>
      </td>

      <td className="v-align-middle text-success"> {this.jobStatus(item.job_status)}</td>
    </tr>
   ))
  }
</tbody>

现在我希望 table 的每一行都可以展开。

我试过这个问题的第一个答案Can a table row expand and close?

问题：我对上述问题 link 的回答的问题是，它不会通过将 table 行映射到某些数据来呈现它。我通过映射来做到这一点。所以在我的地图函数中，我不能包含两行。当我尝试时，语法如预期的那样出错。

我试过的：我试着把这两个（s）放在一个div里面的map函数中。但这只是搞砸了 table 行的 css。我说的两行是 "the main row" 和 "hidden row"，单击主行时将打开。

我该怎么办。

Answer 1

如果你需要在映射中添加多个tr，那么你必须使用多个'tbody' 正如@trevorgk 在 .

中提到的

另一种方法是动态添加一个最初应该显示的行，从而隐藏使用映射函数创建的行。您可以为此使用一些 css

<tbody>
{
    this.state.MediaFiles.map((item, i) => (
        <tr id={i}>
            <td className="v-align-middle">
                .
                .
                your rest code goes here
                .
                .           
    ))
}
</tbody>

现在使用 jquery 添加需要最初显示的行。剩下的部分用你的点击事件处理。

下面给出了一个小型工作模型（不包括映射部分）。

$(function() {
  $('tr.content-row').each(function() {
    $(this).before($('<tr><td class="view-me">View this row</td></tr>'));
  });
});
$(document).on('click', '.view-me', function() {
  $(this).closest('tr').next('tr.content-row').toggleClass('hidden');
});

.hidden {
  display: none;
}

.view-me {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="hidden content-row">
    <td>Row 1</td>
  </tr>
  <tr class="hidden content-row">
    <td>Row 2</td>
  </tr>
  <tr class="hidden content-row">
    <td>Row 3</td>
  </tr>
</table>

动态 table 的可扩展行

Expandable row for dynamic table

javascript

jquery

expandable-table