1

In my Reactjs Application I am having a table. I am using javascript's map function to fill the rows. That means my rows are rendered dynamically. This how I do it

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

Now I want each row of this table to be expandable.

I have tried the first answer of this question Can a table row expand and close?

Problem: My problem with the answer in above question's link is, it does not render the table rows by mapping it to some data. I do it by mapping. So in my map function, I cannot include two rows. When I try to, the syntax gets wrong as expected.

What I tried: I tried to put the two (s) in a div inside map function. But that just screws the css of table row. The two rows I am talking about is "the main row" and the "hidden row" which will get open when main row is clicked.

How should I do it.

4

1 回答 1

1

如果您需要在映射中添加多个 tr，那么您必须使用 @trevorgk 在此答案中提到的多个“tbody” 。

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

于 2017-09-14T13:15:18.223 回答