在我的项目中,我有一个联系人表格,其中包含一些信息栏,如下所示
<table>
<thead>
<tr>
<th>Name</th>
<th>Designation</th>
<th>Organization</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>Aziz</td>
<td>Executive</td>
<td>BIBT</td>
<td>Dhaka</td>
</tr>
<tr>
<td>Mizan</td>
<td>Manager</td>
<td>BIBT</td>
<td>Dhaka</td>
</tr>
</tbody>
</table>
此表单结果如下
Name Designation Organization Address
---- ------------ -------------- ----------
Aziz Executive BIBT Dhaka
Mizan Manager BIBT Dhaka
但在我的情况下,我需要另一个用于打印的表的视图,它将显示如下的结果,
| Aziz | | Mizan |
| Executive, BUBT | | Manager, BUBT |
| Dhaka | | Dhaka |
如何为我的表格实现此布局?我使用datatable插件的一件事,我只需要这个布局用于打印目的。任何帮助表示赞赏。
答案 0 :(得分:3)
您可以使用javascript转置您的表格。我假设你正在使用jquery,
首先,您需要稍微更改HTML标记, 您可以隐藏和显示基于CSS媒体查询的元素,因此,我将相关的类添加到span和td。
<table>
<thead>
<tr>
<th>Name</th>
<th>Designation</th>
<th>Organization</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>Aziz</td>
<td>Executive<span class = 'display-on-print'> ,BIBT</span></td>
<td class = 'hide-on-print'>BIBT</td>
<td>Dhaka</td>
</tr>
<tr>
<td>Mizan</td>
<td>Manager <span display-on-print> ,BIBT</span></td>
<td class = 'hide-on-print'>BIBT </td>
<td>Dhaka</td>
</tr>
</tbody>
</table>
<button>Transpose</button>
现在,您可以使用jquery来转置表格,
$("button").click(function(){
$("table").each(function() {
var $this = $(this);
var newrows = [];
$this.find("tr").each(function(){
var i = 0;
$(this).find("td").each(function(){
i++;
if(newrows[i] === undefined) { newrows[i] = $("<tr></tr>"); }
newrows[i].append($(this));
});
});
$this.find("tr").remove();
$.each(newrows, function(){
$this.append(this);
});
});
return false;
});
答案 1 :(得分:-2)
ExtractorMediaSource.Factory
&#13;