CODEWITHSUNDEEP
javascriptjqueryhtmlcssarrays
Heisenberg
Heisenberg

Reputation: 5299

How to create multidimentional array in html tables

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>

Upvotes: 0

Views: 49

Answers (1)

mplungjan
mplungjan

Reputation: 178215

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>

Upvotes: 1

Related Questions