移除& lt; td>那有 然后创建subheader

remove <td> that has &nbsp; and make sub header

本文关键字：创建 然后 subheader nbsp lt td 移除 那有      更新时间：2023-09-26

我正在研究一个应用程序，该应用程序从我无法控制的服务器读取数据，但我需要在此表上设置前端样式以使其看起来像其他应用程序。表看起来是这样的。

<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>块持续重复一英里。有一些行具有日期，结果，范围和评论只有&nbsp;，然后我想删除该行的所有数据标签并删除所有<td>，除了描述并添加rowspan="5"。

供参考这是我上一个问题的后续问题。只是给出一个要点-我想在每个td元素中添加数据标签，以便它们在移动设备上使用:before显示。

这是我以前的Stackoverflow帖子的链接

Thanks for the help

我相信下面的函数可以完成你想要做的事情:

  1. 循环所有<tr>
  2. 获取
    3. 中的所有<td>
  3. 在索引1处存储<td> (Description)
  4. 过滤剩余的<td>集合并获得仅包含&nbsp;的集合
  5. 如果全部为空，删除它们并调整剩余<td>
    6. 的属性

$(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 "&nbsp;"
    var emptytds = tds.not(descriptionTD).filter(function() {
      return $(this).html() === "&nbsp;";
    });
    
    //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>

相关文章：