文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在html表格中检测元素并切分成组

问如何在html表格中检测元素并切分成组
EN

Stack Overflow用户

提问于 2020-04-19 15:05:19

回答 2查看 37关注 0票数 0

我正在使用HTML表格，需要以某种方式实现颜色变化。我想要的结果如下所述。

下图显示假设当前状态为上图，然后单击单元格1，上图变为下图。

我想选择first元素，然后在包括第一个单元格在内的5单元格后面添加'aqua‘类。

我实现了在这些点击的单元格中选择first单元格，但我不知道如何在5个单元格中检测出有“class”的单元格。

如果有人有意见，请让我知道。

谢谢

$("td").click(function() {
  $(this).addClass("red");
  $("td.aqua").removeClass("aqua");
  $("td.red").first().addClass("aqua");
  
});

td {
  transition-duration: 0.5s;
  border: solid black 1px;
  padding: 5px;
  cursor:pointer;
}

table {
  border-collapse: collapse;
}

.red {
background-color:red;}

.aqua{
background-color:aqua;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id=calendar></div>

<script>
let html = ''
html += '<table>';
let i = 0;


for (let w = 0; w < 5; w++) {
  html += '<tr>';
  for (let d = 0; d < 10; d++) {
    i=i+1;
    html += '<td>'+ i+'</td>'
    }
    html += '</tr>';
  }
html += '</table>'
document.querySelector('#calendar').innerHTML = html;


</script>

javascript

jquery

html

css

回答 2

Stack Overflow用户

发布于 2020-04-19 16:26:13

我不是100%确定我正确地理解了你需要做什么，但是这将使点击的单元格变成水色，下面的5个单元格变成红色。即使它不完全是你所需要的，它也应该引导你朝着正确的方向前进。

$('body').on('click', "td", function() {
  let _this = this;
  let _index = -1;
  $(this).parents('table').find('td').each(function(i, el){
    if(el == _this){
      _index = i;
    }
    if (_index > -1 && i > _index && i < (_index + 6)){
      console.log(i);
      $(el).addClass('red');
    }
  });
  $(this).addClass("aqua");
});

在逻辑层面上，您需要遍历所有td元素并检测其中哪个元素被单击，获取索引，然后将类red添加到以下5个元素中。将类aqua应用于单击的末尾或开头的类。

票数 0

Stack Overflow用户

发布于 2020-04-19 16:26:20

这是你想要的吗？

$("table").on("click", "td", function(ev) {
  $(this).removeClass("aqua").addClass("red");

  let nextRowIdx = this.parentNode.rowIndex,
      nextCellIdx = this.cellIndex + 5;
  if (nextCellIdx >=10) {
    nextRowIdx += 1;
    nextCellIdx -= 10;
  }
  try {
    let tbl = this.parentNode.parentNode,
        cell = tbl.children[nextRowIdx].children[nextCellIdx];
    $(cell).removeClass("red").addClass("aqua");
  } catch (err) {
  }
});

td {
  transition-duration: 0.5s;
  border: solid black 1px;
  padding: 5px;
  cursor:pointer;
}

table {
  border-collapse: collapse;
}

.red {
background-color:red;}

.aqua{
background-color:aqua;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id=calendar></div>

<script>
let html = ''
html += '<table>';
let i = 0;


for (let w = 0; w < 5; w++) {
  html += '<tr>';
  for (let d = 0; d < 10; d++) {
    i=i+1;
    html += '<td>'+ i+'</td>'
    }
    html += '</tr>';
  }
html += '</table>'
document.querySelector('#calendar').innerHTML = html;

</script>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61300745

复制

相似问题

问如何在html表格中检测元素并切分成组
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在html表格中检测元素并切分成组EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在html表格中检测元素并切分成组
EN