Question

在我的Reactjs应用程序中，我有一张桌子。我正在使用javascript的map函数来填充行。这意味着我的行是动态呈现的。这是我怎么做的

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

现在我希望这个表的每一行都可以扩展。

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

问题：我在问题链接中的答案问题是，它不会通过将表映射到某些数据来呈现表行。我通过映射来做到这一点。所以在我的map函数中，我不能包含两行。当我尝试时，语法按预期出错。

我尝试了什么：我试图将两个（s）放在地图函数中的div中。但那只是拧紧了表行的CSS。我正在谈论的两行是＃34;主行＆＃34;和＃34;隐藏的行＆＃34;单击主行时将打开。

我该怎么办？

Answer 1

如果你需要在映射中添加多个tr，那么你必须使用多个'tbody' 正如@trevorgk在answer中提到的那样。

另一种方法是动态添加最初应显示的行，从而隐藏使用映射函数创建的行。你可以使用一些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>

动态表的可扩展行

1 个答案: