如何在JavaScript中删除和重新排序表格中的单元格

how to remove and re-order cells in a table in JavaScript

本文关键字：排序 表格 单元格 JavaScript 删除 新排序      更新时间：2023-09-26

根据问题，我如何在JavaScript/Prototype中删除空单元格并将具有数据的单元格放在表的顶部，基本上所有具有数据的单元格都将位于顶部，然后应该删除空单元格。

<table>
    <tr class="row">
        <td class="c1">Cell1</td>
        <td class="c2">Cell2</td>
    </tr>
    <tr class="row">
        <td class="c1">Cell1</td>
        <td class="c2"></td>
        <td class="c3">Cell3</td>
    </tr>
    <tr class="row">
        <td class="c1">Cell1</td>
        <td class="c2">Cell2</td>
        <td class="c3"></td>
    </tr>
</table>

Cell1   Cell2                    Cell1  Cell2   Cell3
Cell1           Cell3     --->   Cell1  Cell2
Cell1   Cell2                    Cell1

谢谢

最后这是一个需要编码的算法。

我只是使用dom功能，因为我不熟悉jQuery或其他框架，但我认为你可以弄清楚算法的想法。转换它应该不会太难。

<html>
<head>
<script type="text/javascript">
function init() {
  var table = document.getElementsByTagName("table")[0];
  var trs = table.getElementsByTagName("tr");
  var data = [];
  var rows, columns;
  // run through all TRs and TDs and collect the data into an array without
  // empty slots
  for (var r = 0; r < trs.length; r++) {
    var tds = trs[r].getElementsByTagName("td");
    for (var d = 0; d < tds.length; d++) {
      if (tds[d].innerHTML) {
        data[d] = (data[d] || []).concat(tds[d].innerHTML);
      }
    }
  }
  // the tricky thing now is to convert the X/Y alignment of the
  // elements in data into a Y/X one for the table
  columns = data.length;        // target table will have this many columns
  rows = data[0].length;        // target table will have this many rows
  table = document.createElement("table");
  for (var r = 0; r < rows; r++) {
    var tr = document.createElement("tr");
    for (var c = 0; c < columns; c++) {
      var td = document.createElement("td");
      td.innerHTML = data[c][r] || "";
      tr.appendChild(td);
    }
    table.appendChild(tr);
  }
  document.body.appendChild(table);
}
</script>
</head>
<body onload="init()">
<table>
    <tr class="row">
        <td class="c1">Cell1</td>
        <td class="c2">Cell2</td>
    </tr>
    <tr class="row">
        <td class="c1">Cell1</td>
        <td class="c2"></td>
        <td class="c3">Cell3</td>
    </tr>
    <tr class="row">
        <td class="c1">Cell1</td>
        <td class="c2">Cell2</td>
        <td class="c3"></td>
    </tr>
</table>
</body>
</html>

window.onload = function() {
    var tds = document.getElementsByTagName("td");
    for(var i=0; i<tds.length; i++) {
        if(tds[i].innerHTML == "") {
            tds[i].parentNode.removeChild(tds[i]);
        }
    }
};
相关文章：