Show color in js nodes

问题

I have a problem to show the different color in the js tree. Below is my coding what I've tried:

 <?php 
    $folderData = mysqli_query($mysql_con,"select f.id, f.name, f.parentid, f.status, f.add_underline,f.file_type, f.jenis_fail from filing_code_management f where f.status = 1 and f.jenis_fail = 1 union all select s.id, s.file_name,s.id_category, s.status, s.add_underline, s.file_type, s.jenis_fail from upload_filing_dms s where s.status = 1 and s.jenis_fail = 1");
   $folders_arr = array();
   while($row = mysqli_fetch_assoc($folderData)){
      $parentid = $row['parentid'];

$rrr  = "Testing";
      // echo $siri_pindaan;
      if($parentid == '0') $parentid = "#";

      $selected = false;$opened = false;
      if($row['id'] == 2){
         $selected = true;$opened = true;
      }
      $folders_arr[] = array(
    
         "id" => $row['id'],
         "parent" => $parentid,
         "text" => $rrr. ' ' .$row['name'] . ' ' ."<span id='open' style='font-size:9px;'>".$refer_to_code .$row['filing_code_refer']."</span>" .' '. "<span id='open' style='font-size:9px;'>".$link_to_code .$row['filing_code_link']."</span>" .' '. "<span id='open' style='font-size:9px;'>".$row['description_update']."</span>".' '. "<span style='display:none;' id='open'>".$siri_pindaan_edit."</span>",
         "category" => $row['category'],
         "filing_code_refer" => $row['filing_code_refer'],
         // "status" => $row['status'], // status 0 is inactive, status 1 is active
         "data" => array("status" => $row['status'],"add_underline"=>$row['add_underline'],"file_type"=>$row['file_type']) ,
         "state" => array("selected" => $selected,"opened"=>$opened) 
     
      );
   }

   ?> 

Javascript

        .jstree({
          'core': {
            'data': folder_jsondata,
            'multiple': false
          },
          'plugins': ['sort'],
          'sort': function(a, b) {
            return this.get_text(a).localeCompare(this.get_text(b), 'en', {
              numeric: true
            });
          }
        });

        var getColor = function(i) {
          if (i >= 100 && i <= 199) {
            return "blue";
          } else if (i >= 200 && i <= 299) {
            return "red";
          } else if (i >= 300 && i <= 399) {
            return "yellow";
          } else if (i >= 400 && i <= 499) {
            return "purple";
          } else if (i >= 500 && i <= 599) {
            return "green";
          } else {
            return "#000";
          }
        };
        
          var tree = $('#folder_jstree').jstree(true);
          nodelist.forEach(function(n) {
            tree.get_node(n.id).a_attr.style = "color:" + getColor(parseInt(n.text.substr(0, 3), 10))+ ";"+ getStrike(n.data.status) + getUnderline(n.data.add_underline)+ get_file_type(n.data.file_type)
            tree.redraw_node(n.id); //Redraw tree
            colorNodes(n.children); //Update leaf nodes
          });
        };

My output cannot follow the number to present the color if I've added "Testing" word in the front of the number.Like below the picture:

Actually I want the output like below the picture. The "Testing" word with color can show infront of number.

This is my working jsfiddle: https://jsfiddle.net/jo01vhkw/

Hope someone can guide me how to solve it. Thanks.

Updated Span

  "text" => "<span>".$rrr."</span>" . ' ' .$row['name'] . ' ' ."<span id='open' style='font-size:9px;'>".$refer_to_code .$row['filing_code_refer']."</span>" .' '. "<span id='open' style='font-size:9px;'>".$link_to_code .$row['filing_code_link']."</span>" .' '. "<span id='open' style='font-size:9px;'>".$row['description_update']."</span>".' '. "<span style='display:none;' id='open'>".$siri_pindaan_edit."</span>",
         "category" => $row['category'],

回答1:

Your code is correct.

Just edit this sentence:

tree.get_node(n.id).a_attr.style = "color:" + getColor(parseInt(n.text.substr(0, 3), 10))+ ";"+ getStrike(n.data.status) + getUnderline(n.data.add_underline)+ get_file_type(n.data.file_type)

to

tree.get_node(n.id).a_attr.style = "color:" + getColor(parseInt(n.text.substr(5, 3), 10))+ ";"+ getStrike(n.data.status) + getUnderline(n.data.add_underline)+ get_file_type(n.data.file_type)

Your problem at here:

n.text.substr(0, 3)

And if you want access to span tag in a tag, you can try this method:

$($(tree.get_node(n.id,true)).children().find('span')).each(function(i, e){
    $(e).css('color', 'red')
})

Of course, you need put it after tree.redraw_node()

来源：https://stackoverflow.com/questions/62669094/show-color-in-js-nodes