我有一个表格,我试图根据表格单元格中的值存在来创建类似的东西。
要获得的结果 - jsFiddle 结果
<table width="100%" border="1" cellspacing="0" cellpadding="0" class="top-table-bg" id="mytable">
<tbody><tr>
<th style="width:200px"><br>First Row<br>Second Row<br>Third Row<br>Forth Row<br></th>
<th style="width:200px"><p>Heading1<br>
</p>
<p>First Row<br>
</p></th>
<th style="width:200px"><p>Heading2
<br>
</p>
<p>Second Row
<br>
Forth Row<br>
</p></th>
<th style="width:200px"><p>Heading3
<br>
</p>
<p>Second Row<br>
Third Row<br>
<br>
</p></th>
</tr>
<tr>
<td style="width:200px;text-align:center;">First Row</td>
<td style="width:200px;text-align:center;">20</td>
<td style="width:200px;text-align:center;"></td>
<td style="width:200px;text-align:center;"></td>
</tr>
<tr>
<td style="width:200px;text-align:center;">Second Row</td>
<td style="width:200px;text-align:center;"></td>
<td style="width:200px;text-align:center;">20</td>
<td style="width:200px;text-align:center;">20</td>
</tr>
<tr>
<td style="width:200px;text-align:center;">Third Row</td>
<td style="width:200px;text-align:center;"></td>
<td style="width:200px;text-align:center;"></td>
<td style="width:200px;text-align:center;">20</td>
</tr>
<tr>
<td style="width:200px;text-align:center;">Forth Row</td>
<td style="width:200px;text-align:center;"></td>
<td style="width:200px;text-align:center;">20</td>
<td style="width:200px;text-align:center;"></td>
</tr>
</tbody></table>
这就是我尝试过的,但它填充了所有值:(
我的尝试 - jsFiddle 尝试
$('#mytable>tbody>tr').each( function(){
if($(this).text() != '' ) {
$('th').append($(this).children('td').first().text() + "<br>");
}
});
让我知道我做错了什么..在jquery中启动..如果是基本的,请原谅