How to create multidimentional array in html tables

Question

I created tables in which each cells will change its class between clicked cells.

When I create this table, I would like to get clicked history array.

In the current state,history array is stored in clicked array.

clicked array is like

array=[1,4,6,9]

but My desired result is like

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

or

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

I mean in each class change,I would like to get parent keys for manipulation.

If you have some opinion, please let me know.

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>

Can you give us an idea what the steps are and what the result looks like? Because the code you have does make the clicked cells aqua in sets. So you could just read the aqua cells in start-end order — mplungjan
– mplungjan, Commented Apr 5, 2020 at 7:28
Thank you for comment,my goal is to make calendar like tables, and can register range event for example aqua cells in this example, and next ,removeClass of aqua cells by clicking one of them. therefore I would like to get parent key in each event. If we can reach parent key, we can removeClass by clicking one cells between start and end cells..it like const arr = array( 1 => array ( 1, 2, 3 ), 2 => array ( 6, 7).. — Heisenberg
– Heisenberg, Commented Apr 5, 2020 at 7:41

mplungjan · Accepted Answer · 2020-04-05 07:49:01Z

1

Will this help?

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>

edited Apr 5, 2020 at 7:49

answered Apr 5, 2020 at 7:17

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Heisenberg Over a year ago

Thanks,My desired result is when I click 1 then 3 then 6then9,arraylike[1,3],[6,9] each cells is becomes aqua and sandwitched by start and end cells. is this code reproductive?

Collectives™ on Stack Overflow

How to create multidimentional array in html tables

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related