Question

我有一个以下问题我无法绕过头。

我有一个自动生成的开放式故障案例报告，然后以HTML文件形式发送给需要知道的人。以前它是一个简单的表，没有任何样式，只有文本。它不是非常用户友好所以如果它们太长，我会添加样式和细胞崩溃。接下来我想添加排序。我发现simple example in JS from w3schools有效。

问题是，当报告在移动设备上以 Chrome 打开时（也在桌面上响应模式）并且表格已排序，字体大小会搞砸。它仅影响某些列和不同的列，具体取决于屏幕宽度。

这是排序前的样子：

这是在以下之后：

如果展开单元格，您可以看到只有未被隐藏的文字被弄乱了：

我尝试将单元格封装在其他DIV和SPAN中，尝试不同的字体大小属性并添加宽度约束。到目前为止没有任何工作。我不熟悉HTML / CSS / JS，不幸的是弄清楚它有什么问题。

我会很高兴得到任何帮助。

以下是您试用的示例报告：

＆＃13;

window.onload = function() {
  c = document.getElementsByClassName('expand');
  for (i = 0; i < c.length; i++) {
    lc = c[i].lastChild;
    lc.style.display = "none";
    lc.previousSibling.style.display = "inline";
  }
  c = document.getElementsByClassName('expand');
  for (i = 0; i < c.length; i++) {
    c[i].addEventListener("click", function(e) {
      if (this.lastChild.style.display == "table") {
        this.lastChild.style.display = "none";
        this.lastChild.previousSibling.style.display = "initial"
      } else {
        this.lastChild.style.display = "table";
        this.lastChild.previousSibling.style.display = "none"
      }
      console.log(this.id, this.lastChild);
    })
  }
  h = document.getElementsByTagName("th");
  for (i = 0; i < h.length; i++) {
    h[i].innerHTML += "<br><span>&or; &and;</span>";
  }
}
sort_direction = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]

function sortTable(column_id, direction) {
  // Method from https://www.w3schools.com/howto/howto_js_sort_table.asp
  direction = sort_direction[column_id];
  sort_direction[column_id] = sort_direction[column_id] * -1;
  var table, rows, switching, i, x, y, shouldSwitch;
  table = document.getElementById("mainTable");
  switching = true;
  while (switching) {
    switching = false;
    rows = table.getElementsByTagName("tbody");
    for (i = 1; i < (rows.length - 1); i++) {
      shouldSwitch = false;
      x = rows[i].getElementsByTagName("td")[column_id];
      y = rows[i + 1].getElementsByTagName("td")[column_id];
      if (direction == -1) {
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
          shouldSwitch = true;
          break;
        }
      } else if (direction == 1) {
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
    }
  }
}

＆＃13;

body {
  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 13px;
}

th,
td,
.e {
  background: #fff;
  margin: 0 auto;
  text-align: center;
  /* border-radius */
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  /* box-shadow */
  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 3px;
  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 3px;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 3px;
  word-wrap: break-word;
}

th:hover {
  cursor: pointer;
}

tr {
  line-height: 14px;
}

table {
  border-style: none;
  font-size: 10px;
}

.expand {
  border: 1.5px solid DodgerBlue;
}

.expand:hover {
  background-color: #eee;
  cursor: pointer;
}

.medium_cell {
  max-width: 220px;
}

.small_cell {
  max-width: 75px;
}

＆＃13;

<H1>Report</H1>
<h3>Report generated: 2018-06-05 13:10:07</h3>

<table id="mainTable" border="1" bordercolor="#C0C0C0" cellspasing="0" cellpadding="2">
<tbody><tr id="row0" class="class_row">
<th onclick="sortTable(0)">Case ID</th>
<th onclick="sortTable(1)">Status/Title</th>
<th onclick="sortTable(2)">Reported Date</th>
<th onclick="sortTable(3)">Notes</th>
<th onclick="sortTable(4)">Author</th>
<th onclick="sortTable(5)">Assigned Team</th>
<th onclick="sortTable(6)">Assigned Person</th>
<th onclick="sortTable(7)">Severity</th>
<th onclick="sortTable(8)">Priority</th>
<th onclick="sortTable(9)">Flags</th>
<th onclick="sortTable(10)">Information</th>
</tr></tbody>

<tbody><tr id="row3" class="class_row">  <td><a class="small_cell" href="#">ID654321</a></td>
  <td class="medium_cell"><p style="font-weight: bold">Many Many Many Lines Status</p>[TT18][TT00+6*TT18]Title of the reported fault</td>
  <td class="small_cell">23 May 2018</td>
  <td id="row3c1" class="expand medium_cell" style="font-size: 10px;"><div style="font-weight: bold">2018-05-00 00:00:00</div> xxxx xxxxxxxxx xx xxxxBxxx
x4 - xxxxxRxxx, xx. <p style="font-size: 4px;"/><div style="display:none; font-size: 12px;">&#8681; <span style="font-style: oblique; font-size: 10px; font-weight: bold">click to expand</span> &#8681;</div><div style="display: table;"><div style="font-weight: bold">2018-05-00 00:00:00</div> xxxx xxxxRxx xx xxxxxxxxx
. xxxxxxx Rxxxxx xxxxxxxx.<BR><div style="font-weight: bold">2018-05-00 00:00:00</div> xxxx xxxxBxxx xx xxxxRxx
xxxxxx xxxxx xxxx xxxx xxx</div></td>
  <td class="small_cell">Henry</td>
  <td>TEAMBLUE</td>
  <td class="small_cell">Maria</td>
  <td style="background-color:Orange; color:Black;">B<br>Major</td>
  <td style="background-color:Orange; color:Black;">2<br>Critical</td>
  <td></td>
  <td id="row3c2" class="expand"><span style="font-style: oblique">RC: unknown, LE: yyyy-mm-dd</span><div style="font-weight: bold">2018-05-00</div> xxxx (xxxxxx): xxxxxx xxxxxx xxxxx xx xxxxxxx xxxxxxx xx xxxxxxx; xR xxxx <p style="font-size: 4px;"/><div style="display:none; font-size: 12px;">&#8681; <span style="font-style: oblique; font-size: 10px; font-weight: bold">click to expand</span> &#8681;</div><div style="display: table; margin: 0 auto;"><div style="font-weight: bold">2018-05-00</div> xxxx (xxxxxx): xxxxxxxxxxxxx</div></td>
</tr></tbody>


<tbody><tr id="row4" class="class_row">  <td><a class="small_cell" href="#">ID345678</a></td>
  <td class="medium_cell"><p style="font-weight: bold">Even Longer Status</p>[Title_tag][TT00]Title of the reported fault</td>
  <td class="small_cell">24 May 2018</td>
  <td class="medium_cell" id="row4c1" style="font-size: 10px;"><div style="font-weight: bold">2018-05-00 00:00:00</div> xxxx xxxxxxxxx xx xxxxBxxx
x4 - xxxxxRxxx, xx.</td>
  <td class="small_cell">Doug</td>
  <td>TEAMBLUE</td>
  <td class="small_cell">Ross</td>
  <td style="background-color:Orange; color:Black;">B<br>Major</td>
  <td style="background-color:Yellow; color:Black;">3<br>Normal</td>
  <td></td>
  <td id="row4c2" class="expand"><span style="font-style: oblique">RC: unknown, LE: yyyy-mm-dd</span><div style="font-weight: bold">2018-05-00</div> xxxxxx(xxxxxxxx): xxxxxxx xxx xxxxxxxx xxxxxxx xx xxxxxx. <p style="font-size: 4px;"/><div style="display:none; font-size: 12px;">&#8681; <span style="font-style: oblique; font-size: 10px; font-weight: bold">click to expand</span> &#8681;</div><div style="display: table; margin: 0 auto;"><div style="font-weight: bold">2018-05-00</div> xxxx (xxxxxx): xxxxxx xxxxxx xxxxx xx xxxxxxx xxxxxxx xx xxxxxxx; xR xxxx
<div style="font-weight: bold">2018-05-00</div> xxxx (xxxxxx): xxxxx xxxxx xx xx xxxxxxx xx xx xx345234</div></td>
</tr></tbody>
</table>

＆＃13;

*编辑*
如果您想要自己下载和试用文件，可以获得here

排序

0 个答案: