javascript - 删除 javascript/jquery 中的幻像表格单元格

Question

如果之前有人问过这个问题，我深表歉意。我尝试进行彻底的搜索，但我想可能使用了错误的术语。

无论如何。我有一些动态生成的数据并弹出到表中，所有这些数据都是通过一些 XSLT 魔法实现的。我还找到了一种方法来动态检查表中的给定条目是否需要跨越两个或更多表格单元格并执行此操作。

不幸的是，在 colspan 属性中运行会将表格单元格添加到表格的末尾。我有一张截图，但我的信誉不够好，无法发布图片。

我已经研究了 xslt 中处理该问题的几乎所有方法，并得出结论:答案在于 javascript/jquery。

我已经走到这一步了:

var ths = $('table.calendar > tbody > tr > th');
var tds = $('table.calendar > tbody > tr > td');
thLength = ths.length;
tdLength = tds.length;

//all good so far

if(tdLength > thLength) { //which it most certainly is
    //somehow delete the unwanted element(s) in the td array, like:
    for(var i = tdLength; i > thLength; i--) {
        $(tds[i]).remove();
    }
}

除非那不起作用。而且，当然，这可能是因为我充其量只是一个黑客程序员。

提前致谢。

Answer 1

您可以使用slice和删除，但您需要每行执行此操作；您的 $('table.calendar > tbody > tr > td'); 将为您提供同一 jQuery 对象中多行的单元格。

所以:

var ths = $('table.calendar > tbody > tr > th');
var thLength = ths.length;
$('table.calendar > tbody > tr').each(function() {
    var tds = $(this).children('td');
    tds.slice(thLength).remove();
});

当然，您可以在回调中组合这两行:

    $(this).children('td').slice(thLength).remove();

请注意，假设您只有一行第 元素。 (这可能应该在 thead 中，而不是 tbody 中，FWIW。)

另请注意，这些都没有考虑 colspan 。如果您使用 colspan，则不能仅根据单元格数量来执行操作(因为单个单元格跨越列)。

slice

Reduce the set of matched elements to a subset specified by a range of indices.

采用开始和结束；如果您关闭 end，它将转到集合的末尾。

实例:

setTimeout(function() {
  var ths = $('table.calendar > tbody > tr > th');
  var thLength = ths.length;
  $('table.calendar > tbody > tr').each(function() {
    var tds = $(this).children('td');
    tds.slice(thLength).remove();
  });
}, 500);

<p>Table will update after a brief delay.</p>
<table class="calendar">
  <tbody>
    <tr>
      <th>One</th>
      <th>Two</th>
      <th>Three</th>
      <th>Four</th>
    </tr>
    <tr>
      <td>1-1</td>
      <td>1-2</td>
      <td>1-3</td>
      <td>1-4</td>
      <td>1-5</td>
      <td>1-6</td>
      <td>1-7</td>
    </tr>
    <tr>
      <td>1-1</td>
      <td>1-2</td>
      <td>1-3</td>
      <td>1-4</td>
    </tr>
    <tr>
      <td>1-1</td>
      <td>1-2</td>
      <td>1-3</td>
      <td>1-4</td>
      <td>1-5</td>
    </tr>
    <tr>
      <td>1-1</td>
      <td>1-2</td>
      <td>1-3</td>
      <td>1-4</td>
      <td>1-5</td>
      <td>1-6</td>
    </tr>
  </tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>