时间戳

首页 > 解决方案 > 如何根据 colspan 属性的值删除 HTML 表 td？

javascript - 如何根据 colspan 属性的值删除 HTML 表 td？

问题描述

我正在开发一个 Java Web 应用程序项目。我遇到了一个问题，我想在colspan="3" or colspan > 1使用 JavaScript 时准确删除 2 个表格单元格。

这是我的代码：JSFiddle

它看起来像这样： 图片

但我希望它看起来像这样，因为使用colspan搞砸了： 图片

我使用了我在网上找到的这个 Javascript 代码，但这只会删除colspan=3 or colspan>1旁边没有的单元格。

var countColumns = function(table) {
  if (!table || !table.tagName || table.tagName != 'TABLE') {
    throw new Error("The parameter 'table' must be a <table> DOM element.");
  }

  var maxColumnsCount = 0;
  for (var i = 0; i < table.rows.length; i++) {
    maxColumnsCount = Math.max(table.rows[i].cells.length, maxColumnsCount);
  }

  return maxColumnsCount;
};

var table = document.getElementById('routine_table');
var rows = table.rows;

for (var i = (countColumns(table) - 1); i >= 1; i--) {
  var str = '';
  var cellToDelete = [];
  if (rows[1].cells[i] != undefined) {
    str = rows[1].cells[i].innerHTML;
    cellToDelete.push(i);
  } else if (rows[1].cells[i + 1].colSpan > 1) {
    str = rows[1].cells[i + 1].innerHTML;
    cellToDelete.push(i + 1);
    cellToDelete.push(i);
  }


  for (var j = 0; j < rows.length; j++) {
    for (var k = 0; k < 2; k++) {
      if (rows[j].cells[cellToDelete[k]] != undefined) {
        if (rows[j].cells[cellToDelete[k]].colSpan > 1)
          rows[j].deleteCell(cellToDelete[k]);

      }
    }
  }

}
.table td {
  text-align: center;
}

.table th {
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<div class="container">
  <div class="row">
    <table class="table table-bordered" id="routine_table">
      <thead>
        <tr>
          <th></th>
          <th>8.00 - 8.50</th>
          <th>8.50 - 9.40</th>
          <th>9.40 - 10.30</th>
          <th>10.30 - 11.20</th>
          <th>11.20 - 12.10</th>
          <th>12.10 - 1.00</th>
          <th>1.00 - 1.50</th>
          <th>1.50 - 2.40</th>
          <th>2.40 - 3.30</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>Saturday</th>
          <td> </td>
          <td> </td>
          <td> </td>
          <td colspan="3"> CSE 4214 </td>
          <td> I want to delete this cell when colspan=3</td>
          <td> I want to delete this cell when colspan=3</td>
          <td>CSE 4255 </td>
          <td> CSE 4213</td>
          <td> CSE 4213 </td>
        </tr>
        <tr>
          <th>Sunday</th>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> CSE 4213 </td>
          <td> CSE 4227 </td>
          <td> </td>
        </tr>
        <tr>
          <th>Monday</th>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> CSE 4255</td>
          <td> CSE 4255</td>
          <td> CSE 4203 </td>
          <td> CSE 4225</td>
        </tr>
        <tr>
          <th>Tuesday</th>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> CSE 4203</td>
          <td> CSE 4227</td>
          <td> CSE 4225</td>
          <td colspan="3"> CSE 4228 </td>
          <td> I want to delete this cell when colspan=3</td>
          <td> I want to delete this cell when colspan=3 </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

它创建此输出：图像

我该如何解决这个问题？一个完整的解决方案将不胜感激。

标签： javascripthtml

解决方案

下面是我编写的 javascript 代码，用于从您在演示中给出的 HTML 中删除额外的 td 元素。

var table = document.getElementById('routine_table');
var rows = table.rows;
for (var i = 1; i < rows.length; i++) {
    var cells = rows[i].cells;
    for (var j = 0; j < cells.length; j++) {
        var colspan = cells[j].colSpan;
        if(colspan != undefined && colspan != 1){
            for (let index = 0; index < colspan-1; index++) {
                rows[i].removeChild(cells[j+1]);
            }
        }
    }
}

该解决方案将根据您的问题陈述起作用（正如我在本地测试过的那样）。但是我的问题是，如果您在 HTML 中手动编写 colspan，那么为什么不删除额外的 td 元素。如果不是，请分享如何动态附加该 colspan，然后我可以根据您的要求更新上述代码。

推荐阅读