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

Posted 2023-05-09

【中文标题】如何在html表中创建多维数组

【英文标题】：How to create multidimentional array in html tables

【发布时间】：2020-07-17 05:38:17

【问题描述】：

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

当我创建这个表时，我想获得点击历史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;

.aquabackground-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>

【问题讨论】：

你能告诉我们步骤是什么，结果是什么样的吗？因为您拥有的代码确实使单击的单元格成组变水。所以你可以按开始顺序阅读水族细胞

感谢您的评论，我的目标是制作像表格一样的日历，并且可以通过单击其中一个来注册范围事件，例如 aqua cells 在这个例子中，然后，removeClass aqua 单元格.因此，我想在每个事件中获得parent key。如果我们可以到达parent key，我们可以通过单击start 和end 单元格之间的一个单元格来removeClass..就像const arr = array( 1 => array ( 1, 2, 3 ), 2 => array ( 6, 7)..

【参考方案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>

【讨论】：

谢谢，我想要的结果是当我点击1 然后3 然后6then9,arraylike[1,3],[6,9] 每个单元格变成aqua 并被开始和结束单元格。这段代码是可复制的吗？