drupal-rorschach/web/themes/custom/rorschach/scripts/main.js

console.log('salut');

// fusion cellules dans tableau

///
// doit chercher un p dans td dans tbody dans table dans .paragraph--type--text qui a la class .rowspan et setAttribut a son parent td

var cellRowspans = document.querySelectorAll('p.rowspan');
// cellRowspan.setAttribute('rowspan', '4');

for (let cellRowspan of cellRowspans){
    let cellRowSpanParent = cellRowspan.parentElement;
    console.log(cellRowSpanParent);
    cellRowSpanParent.setAttribute('rowspan', '4');
}

// // ok va chercher tous les éléments p.cell-display-none (child)
var displayNones = document.querySelectorAll('p.cell-display-none');

for (let displayNone of displayNones){
  let displayNoneParent = displayNone.parentElement;
  displayNoneParent.classList.add('display-none');
}
console.log(displayNone);



// // // ok va chercher un element td (parent)
// var tdDisplayNone = document.querySelector('p.cell-display-none').parentElement;   
// console.log(tdDisplayNone);
// // /// et lui appliquer une class.
// tdDisplayNone.classList.add('display-none');




///// comment aller chercher TOUS les éléments td ?  //////

//// en repassant par element parent ? puis
// let tbody = document.querySelectorAll('tbody');
// console.log(tbody);

// let pDisplayNone = document.getElementsByClassNameAll('.cell-display-none');
// console.log(pDisplayNone);

// let td = pDisplayNone.parentElement;
// console.log(td);
// td.classList.add('display-none');

// tbody.forEach(pDisplayNone => {
//   let td = pDisplayNone.childNodes;
// console.log(td);
// td.classList.add('display-none');
// });





// // let tdparent = [pDisplayNone.parentNode.closest()];
// // while(pDisplayNone.parentNode){
// //     tdparent.push(td);
// //     pDisplayNone = pDisplayNone.parentNode;
// // }


/// pour chaque élément de array pDisplayNone ( NodeList ), 
// pDisplayNone.forEach((element) =>document.querySelectorAll('td'));

/// aller chercher le parent td 
/// et lui appliquer une class.

// faut faire un array de td avant de faire un for each
// let td = new Array(pDisplayNone);
// console.log(td);












// const parent = document.getElementById("parent");
// let childNodes = parent.childNodes;
// console.log(childNodes.length); // let's assume "2"
// parent.appendChild(document.createElement("div"));
// console.log(childNodes.length); // outputs "3"



// function displayNone(){

  // for (let i = 0; i < cellsDisplayNone.lenght; i++ ){
  //   const cellDisplayNone = cellsDisplayNone.parentElement[i]
  //   // let cellDisplayNone = this.parentElement.getElementsByClassName("cell-display-none");
  //   // console.log(cellDisplayNone);


  // }

  
// };
// cellDisplayNone.classList.add('display-none');
// cellDisplayNone.style.display ="none";




// for (let i = 0; i < cellDisplayNone.lenght; i++ ){

//   cellDisplayNone.style.display ="none";
// }


//////////////

// var cellsRowspan = document.getElementsByClassName("rowspan");
// var cellsDisplayNone = document.getElementsByClassName("cell-display-none");

// function rowspan(){
//   // for (let i = 0; i < cellsRowspan.length; i++){
//   //   cellsRowspan[i].
//   // }
//   let cellRowspan = this.parentNode.querySelector(".rowspan");
//   cellRowspan.setAttribute('rowspan', '4');
// }









// function tableOne(){
//   var table1cell1 = document.querySelector('#tablefield-paragraph-34-field_tablefield-0.tablefield tbody tr td.row_1.col_1');
//   var table1cell2 = document.querySelector('#tablefield-paragraph-34-field_tablefield-0.tablefield tbody tr td.row_2.col_1');
//   var table1cell3 = document.querySelector('#tablefield-paragraph-34-field_tablefield-0.tablefield tbody tr td.row_3.col_1');
//   var table1cell4 = document.querySelector('#tablefield-paragraph-34-field_tablefield-0.tablefield tbody tr td.row_4.col_1');

//   table1cell1.setAttribute('rowspan', '4');
//   table1cell2.style.display ="none";
//   table1cell3.style.display ="none";
//   table1cell4.style.display ="none";
// }


// // function tableTwo(){
// //   var table2cell1 = document.querySelector('#tablefield-paragraph-29-field_tablefield-0.tablefield tbody tr td.row_1.col_1');
// //   var table2cell2 = document.querySelector('#tablefield-paragraph-29-field_tablefield-0.tablefield tbody tr td.row_2.col_1');
// //   var table2cell3 = document.querySelector('#tablefield-paragraph-29-field_tablefield-0.tablefield tbody tr td.row_3.col_1');
// //   var table2cell4 = document.querySelector('#tablefield-paragraph-29-field_tablefield-0.tablefield tbody tr td.row_4.col_1');
  
// //   table2cell1.setAttribute('rowspan', '4');
// //   table2cell2.style.display ="none";
// //   table2cell3.style.display ="none";
// //   table2cell4.style.display ="none";
  
// // }

// tableOne();
// tableTwo();

// var table2cell1 = document.querySelector('#tablefield-paragraph-29-field_tablefield-0.tablefield tbody tr td.row_1.col_1');
// var table2cell2 = document.querySelector('#tablefield-paragraph-29-field_tablefield-0.tablefield tbody tr td.row_2.col_1');
// var table2cell3 = document.querySelector('#tablefield-paragraph-29-field_tablefield-0.tablefield tbody tr td.row_3.col_1');
// var table2cell4 = document.querySelector('#tablefield-paragraph-29-field_tablefield-0.tablefield tbody tr td.row_4.col_1');

// table2cell1.setAttribute('rowspan', '4');
// table2cell2.style.display ="none";
// table2cell3.style.display ="none";
// table2cell4.style.display ="none";


// const table = document.getElementByClass("paragraph--type--text");
// console.log(hello);
// for (const child of table.children) {
//   console.log(child.tagName);
// }

// const paragraph = document.getElementsByClassName("paragraph--type--text");
// for (const table of paragraph.children){
//   table.addClass("rowspan");
// }