Colour child table rows based on logic

hey is there any way we can colour the rows of the grid in child table based on some logic. thank you in advance

frappe.ui.form.on('DocType', {
    refresh: function(frm) {
        // select the first row in the child table
        var rows = document.getElementsByClassName("grid-row");
            for (var i = 0; i < rows.length; i++) {
              rows[i].style.backgroundColor = "cadetblue";
            }
    }
});

i want to colour the row based on item for eg for hotel i want the colour to be cadetblue and for Extra service i want the colour to be antiquewhite

@NCP can you help

frappe.ui.form.on('Student', {
  refresh: function(frm) {
    var rows = document.getElementsByClassName("grid-row");
    var relationshipDetails = frm.doc.student_relationship_detail;

    for (var i = 1; i < rows.length; i++) {
      rows[i].style.backgroundColor = ""; // Reset color for all rows

      if (relationshipDetails && relationshipDetails[i-2]) {
        var relation_field = relationshipDetails[i-2].relationship;
        console.log(`${relation_field} ${i}`);

        if (relation_field === "Father") {
          rows[i].style.backgroundColor = "cadetblue";
        } else if (relation_field === "Mother") {
          rows[i].style.backgroundColor = "antiquewhite";
        }
        else if (relation_field === "Gaurdian") {
          rows[i].style.backgroundColor = "grey";
        }
        else if (relation_field === "Siblings") {
          rows[i].style.backgroundColor = "olive";
        }
      }
    }
  }
});
6 Likes

Well Done @Parth_Vashista :+1: