如何在html表中创建多维数组

Question

我创建了表格，其中每个单元格将在单击的单元格之间更改其类别。

当我创建这个表时，我想获得点击历史array。

在当前状态下，历史array存储在clicked数组中。

点击的数组就像

array=[1,4,6,9]

但我想要的结果就像

array=[[1,2,3,4],[6,7,8,9]]

或

array=[[1,4],[6,9]]

我的意思是在每个班级变化中，我想获得父键进行操作。

如果你有什么意见，请告诉我。

const $days = $("td");
 const range = [-1, -1];
 
 let clicked =[];



 $(function() {
  $("td").click(function() { 

  if (range[0] > -1 && range[1] > -1) { // RESET
        range[0] = -1;
        range[1] = -1;
      }
  
      if (range[0] > -1 && range[1] < 0) { // SET END
        
        range[1] = $days.index(this);
        
        $days.slice(range[0],range[1]+1).addClass('is-active');

      }
  
      if (range[0] < 0 && range[1] < 0) { // SET START
        range[0] = $days.index(this);
      }
       
      let clickedID=$days.index(this);
      clicked.push(clickedID);
      console.log("Array of clicked cells",clicked);
      
      
  });
});

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

table {border-collapse: collapse;}

.aqua{background-color: aqua;}

td:hover {
background-color:yellow;}

.is-active{
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 < 10; w++) {
    html += '<tr>';
    for (let d = 0; d < 10; d++) {
      i = i + 1;
      html += '<td>' + '<div>' + i + '</div>' + '</td>'
    }
    html += '</tr>';
  }
  html += '</table>'
  document.querySelector('#calendar').innerHTML = html;


</script>

Answer 1

这会有帮助吗？

let sets = []
  clicked.forEach((item,i) => { 
    if (i===0 || i%2===0) sets.push([])
    sets[sets.length-1].push(item)
  })  

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


const $days = $("td");
const range = [-1, -1];

let clicked = [];



$(function() {
  $("td").click(function() {

    if (range[0] > -1 && range[1] > -1) { // RESET
      range[0] = -1;
      range[1] = -1;
    }

    if (range[0] > -1 && range[1] < 0) { // SET END

      range[1] = $days.index(this);

      $days.slice(range[0], range[1] + 1).addClass('is-active');

    }

    if (range[0] < 0 && range[1] < 0) { // SET START
      range[0] = $days.index(this);
    }

    let clickedID = $days.index(this);
    clicked.push(clickedID)
    let sets = []
    clicked.forEach((item,i) => { 
      if (i===0 || i%2===0) sets.push([])
      sets[sets.length-1].push(item)
    })  
    console.log("Array of clicked cells", sets);
//    $(".is-active").each((i,td) => console.log(td.innerText))


  });
});

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

div {
  padding: 5px;
}

table {
  border-collapse: collapse;
}

.aqua {
  background-color: aqua;
}

td:hover {
  background-color: yellow;
}

.is-active {
  background-color: aqua;
}

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

<div id=calendar></div>