去掉 <td> 具有並制作子標題

Question

正在開發一個應用程序，該應用程序從我無法控制的服務器讀取數據，但我需要在此表上設置前端樣式，使其看起來與其他表一樣。 桌子看起來像這樣。

 <table> <tr> <td width="30%">Date</td> <td width="40%">Description</td> <td width="17%">Result</td> <td width="15%">Range</td> <td width="8%">Comments</td> </tr> </table> 

<tr>塊持續重復一英里。 有些行的日期，結果，范圍和注釋都只是  然后我要刪除該行的所有數據標簽，並刪除除說明以外的所有<td>並添加rowspan="5" 。

僅供參考，這是我先前問題的跟進問題。 只是為了要-我想在每個td元素中添加數據標簽，以便它們:before移動設備上使用:before出現。

這是我以前的Stackoverflow帖子的鏈接

謝謝您的幫助

Answer 1

我相信以下功能可以完成您想要的工作：

1. 遍歷所有<tr>
2. 獲取所有的<td>
3. 將<td>存儲在索引1（描述）中
4. 過濾其余的<td>集合，並獲得僅包含 集合 
5. 如果全部為空，請將其刪除並調整其余<td>的屬性

 $(function() { $("table tr").each(function() { var tds = $(this).find("td"); //find all td var descriptionTD = tds.eq(1); //get the td for the description //get the remaining tds that only contain " " var emptytds = tds.not(descriptionTD).filter(function() { return $(this).html() === " "; }); //if all the remaing tds are empty if (emptytds.length === tds.length - 1) { emptytds.remove(); descriptionTD.prop("colspan", tds.length).prop("width", "100%"); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table> <tr> <td width="30%">Date</td> <td width="40%">Description 1</td> <td width="17%">Result</td> <td width="15%">Range</td> <td width="8%">Comments</td> </tr> <tr> <td width="30%">&nbsp;</td> <td width="40%">Description 2</td> <td width="17%">&nbsp;</td> <td width="15%">&nbsp;</td> <td width="8%">&nbsp;</td> </tr> <tr> <td width="30%">Date</td> <td width="40%">Description 3</td> <td width="17%">Result</td> <td width="15%">Range</td> <td width="8%">Comments</td> </tr> <tr> <td width="30%">&nbsp;</td> <td width="40%">Description 4</td> <td width="17%">&nbsp;</td> <td width="15%">&nbsp;</td> <td width="8%">&nbsp;</td> </tr> </table>