如何在一个特定的索引后创建一个空行?



我正在尝试创建一个表,从JSON服务获取其值。我想在第6行和第11行之后创建一个空行(或空<tr></tr>),但是我不能这样做。我该怎么做呢?

{altmanzscoring.titles.map((val, i) => (
<tr>
{val.title == "Altman Z' Puan-İmalatçı Firmalar" ? (
<td style={{ color: '#007FB2', fontWeight: 'bold' }}>{val.title}</td>
) : val.title == "Altman Z' Puan-İmalat Harici Firmalar" && i != 13 ? (
<td style={{ color: '#007FB2', fontWeight: 'bold' }}>{val.title}</td>
) : (
<td>{val.title}</td>
)}
{val.values[0].value == 'Ortalama İflas Riski' ? (
<td style={{ color: '#ebc634' }}>{val.values[0].value}</td>
) : val.values[0].value == 'Düşük İflas Riski' ? (
<td style={{ color: '#47d14c' }}>{val.values[0].value}</td>
) : val.values[0].value == 'Düşük İflas Riski' ? (
<td style={{ color: '#e63c41' }}>{val.values[0].value}</td>
) : (
<td>{val.values[0].value}</td>
)}
{val.values[1].value == 'Ortalama İflas Riski' ? (
<td style={{ color: '#ebc634' }}>{val.values[1].value}</td>
) : val.values[1].value == 'Düşük İflas Riski' ? (
<td style={{ color: '#47d14c' }}>{val.values[1].value}</td>
) : val.values[1].value == 'Düşük İflas Riski' ? (
<td style={{ color: '#e63c41' }}>{val.values[1].value}</td>
) : (
<td>{val.values[1].value}</td>
)}
</tr>
))}

索引:i

我不会添加一个空的tr,但如果你想,只是测试索引,如果索引是5的倍数,这种情况下呈现一个额外的空行

或者你有这些选项:

  1. 你可以使用tr: nth-child(5n) {margin-cotton: 5px}css选择器来添加行之间的空间。
  2. 您可以使用多个<tbody>标签(每个组一个)并在那里添加空间

最新更新