删除< td>有 并制作子标题 [英] remove <td> that has   and make sub header

问题描述

我正在研究一个从服务器读取数据的应用程序，但是我无法控制这些数据，但我需要将此表的前端设计为与其他应用程序类似。该表看起来像这样。

< table> < TR> < td width =30％>日期< / td> < td width =40％>说明< / td> < td width =17％>结果< / td> < td width =15％>范围< / td> < td width =8％>评论< / td> < / tr>< / table>

< tr> 块不断重复一英里。有一些行的日期，结果，范围和注释只有& nbsp; 然后我想删除该行的所有数据标签并删除所有< td> 除了描述和添加 rowspan =5。

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

感谢您的帮助

解决方案

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

1. 循环遍历所有< code $< tr>


2. 获取< td> li>
   
3. 将< td> 存储在索引1（说明）处<$ li>过滤剩余的< td> 集合并获取包含& nbsp;


4. 如果全部为空，请移除它们并调整剩余的< td>

$ b的属性$ b

  $（function（）{$（t （函数（）{var tds = $（this）.find（td）; //找到所有的td var descriptionTD = tds.eq（1）; //获取描述的td //获取只包含& nbsp;的剩余tds var emptytds = tds.not（descriptionTD）.filter（function（）{return $（this）.html（）===& nbsp;;}）; //如果所有的剩余tds都是空的if（emptytds.length === tds.length  -  1）{emptytds.remove（）; descriptionTD.prop（colspan，tds.length）.prop（width，100％）; < script src =}}）;}）;  

am working on an application that reads data from servers that I do not have control over but I need to style the front end on this table to look like the others. the table looks something like this.

<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>

the <tr> blocks keep repeating for a mile. There are some rows that have the date, result, range and comments have just   then I want to remove all data labels for that row and remove all <td> except description and add in rowspan="5".

FYI this is a follow up question to my previous question. just to give a gist - I wanted to add in data-labels to every td element so that they show up using :before for a mobile device.

here is the link to my previous Stackoverflow post

Thanks for the help

解决方案

I believe the following function accomplishes what you want by doing:

1. Loop through all <tr>
2. Get all the <td> inside
3. Store the <td> at index 1 (Description)
4. Filter the remaining <td> collection and get the ones that just contain  
5. If all are empty, remove them and adjust the properties of the remaining <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>

这篇关于删除&lt; td&gt;有&nbsp;并制作子标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！