Colour child table rows based on logic

3 
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";
        }
      }
    }
  }
});
7 Likes