React表格处理

July 1, 2016

问题描述

react中在renderreturn中直接输入类似以下的代码:

<tr>
<td><input type="checkbox"/></td>
<td>趣分期</td>
<td>A2102</td>
<td>小王</td>
<td>18817834467</td>
<td>2016-06-01 19:00</td>
<td>IOS9.3</td>
<td>V1.0.0</td>
<td><a href="#">回复</a></td>
</tr>

解决方案:

在渲染的过程当中浏览器不会自动添加theadtbody这样的标签,因此需要在手动添加,如下:

<tbody>
<thead>
<tr>
<th><input type="checkbox"/></th>
<th>客户名称</th>
<th>客户ID</th>
<th>反馈人</th>
<th>手机号</th>
<th>反馈时间</th>
<th>平台</th>
<th>版本</th>
<th>操作</th>
</tr>
</thead>
<tr>
<td><input type="checkbox"/></td>
<td>趣分期</td>
<td>A2102</td>
<td>小王</td>
<td>18817834467</td>
<td>2016-06-01 19:00</td>
<td>IOS9.3</td>
<td>V1.0.0</td>
<td><a href="#">回复</a></td>
</tr>
</tbody>

td中如果想要合并单元格的功能,需要大写S,例如:colSpan,示例代码如下:

<tr>
<td> </td>
<td style={{border:"0"}}>反馈内容</td>
<td style={{border:"0"}} colSpan="7">
<p>显示反馈的内容</p>
<p><span>分贝通</span><section>分贝通回复的内容</section></p>
<input type="text" className="form-control" placeholder="输入回复的内容"/>
</td>
</tr>