JS Change the Styles of Cell or Row where Mouse Hover

When designing a dashboard, you may encounter such a requirement: when the mouse moves over the report block, highlight the current cell or current row where the mouse hovers.

However, due to the particularity of dashboard, the requirement cannot be realized by adding a loading end event which is usually appied in a normal report. How do we achieve this effect? Results as shown below:

2.1 New template

Create a new dashboard, add dataset ds1, and the SQL statement is:

SELECT * FROM Product

Add report block report0 and drag into the data columns of ds1, as shown in the following figure:

2.2 Add event

Select report0 and add an After Initialization event, as shown in the following figure:

The JS code is as follows:

setTimeout(function() {
  //When the mouse passes
  $(".x-table.REPORT0table td").mousemove(function() {
      //The font color of the cell is red
      $(this).css("color", "red");
      //The background of the cell is blue
      $(this).css("background-color", "blue");
      //Bold font of the cell
      $(this).css("font-weight", "bold");
      //Add an underline to the cell
      $(this).css("text-decoration", "underline");
      //The font of the whole row: 11px
      $(this).find("td").css("font-size", "11px");
  });
  //When the mouse is clicked
  $(".x-table.REPORT0table td").mousedown(function() {
      //The font color of the cell is yellow
      $(this).css("color", "yellow");
      //The background of the cell is black
      $(this).css("background-color", "black");
      //Bold font of the cell
      $(this).css("font-weight", "bold");
      //Add an overline to the cell
      $(this).css("text-decoration", "overline");
      //The font of the whole row: 13px
      $(this).find("td").css("font-size", "13px");
  }); 
  //Mouse left
  $(".x-table.REPORT0table td").mouseout(function() {
      //The font color of the cell is black
      $(this).css("color", "black");
      //The background of the cell is white
      $(this).css("background-color", "white");
      //The font of the cell is normal
      $(this).css("font-weight", "normal");
      //The text in the cell is not underlined or overlined
      $(this).css("text-decoration", "none");
      //The font of the whole row: 9px
      $(this).find("td").css("font-size", "9px");
  });
}, 100);

2.3 Template preview

Save the template, and the preview effect is as shown in the figure below:

3.1 Modify the template

Add report block report1 and drag into data columns of ds1, as shown in the figure below:

3.2 Add event

Select report1 and add an After Initialization event, as shown below:

The JS code is as follows:

setTimeout(function() {
  //When the mouse passes
  $(".x-table.REPORT1table tr").mousemove(function() {
    //The font color of the whole row: red
    $(this).css("color", "red");
    //The background color of the whole row: blue
    $(this).css("background-color", "blue");
    //Bold font in the whole row
    $(this).css("font-weight", "bold");
    //Add an underline to text in the whole row
    $(this).css("text-decoration", "underline");
    //The font of the whole row: 11px
    $(this).find("td").css("font-size", "11px");
  });
  
  //When the mouse is clicked
  $(".x-table.REPORT1table tr").mousedown(function() {
    //The font color of the whole row: yellow
    $(this).css("color", "yellow");
    //The background color of the whole row: black
    $(this).css("background-color", "black");
    //Bold font in the whole row
    $(this).css("font-weight", "bold");
    //Add an overline to the text in the whole row
    $(this).css("text-decoration", "overline");
    //The font of the whole row: 13px
    $(this).find("td").css("font-size", "13px");
  });
  
  //Mouse left
  $(".x-table.REPORT1table tr").mouseout(function() {
    //The font color of the whole row: black
    $(this).css("color", "black");
    //The background color of the whole row: white
    $(this).css("background-color", "white");
    //Normal font in the whole row
    $(this).css("font-weight", "normal");
    //The text is nor underlined or overlined
    $(this).css("text-decoration", "none");
    //The font of the whole row: 9px
    $(this).find("td").css("font-size", "9px");
  });
}, 100);

3.3 Template preview

Save the template, and the preview effect is shown in the figure below:

Note: Mobile terminal is not supported.

Change the Styles of Cell or Row where Mouse Hovers in Report Block.frm