javascript (table monitoring events, tr timing scrolling and mouse hover function)

table listening events

In JavaScript, you can use event listeners to listen to HTML table-specific events. Here are some common table events and corresponding JavaScript code examples:

1. Click event (Click):

var table = document.getElementById("myTable");

table.addEventListener("click", function(event) {
    
    
  var target = event.target;
  
  if (target.tagName.toLowerCase() === "td") {
    
    
    // 处理单元格点击事件
    console.log("单元格被点击了");
  } else if (target.tagName.toLowerCase() === "tr") {
    
    
    // 处理行点击事件
    console.log("行被点击了");
  }
});

2. Change event:

To listen to table change events, it usually needs to be combined with form elements (such as input boxes, drop-down lists, etc.). Change events can be fired when the value of a form element changes.

<table id="myTable">
  <tr>
    <td><input type="text" id="txt1"></td>
  </tr>
</table>

var input = document.getElementById("txt1");

input.addEventListener("change", function() {
    
    
  // 处理输入框的更改事件
  console.log("输入框的值已更改");
});

3. Mouseover event (Mouseover):

var table = document.getElementById("myTable");

table.addEventListener("mouseover", function(event) {
    
    
  var target = event.target;
  
  if (target.tagName.toLowerCase() === "td") {
    
    
    // 处理单元格鼠标悬停事件
    console.log("鼠标悬停在单元格上");
  } else if (target.tagName.toLowerCase() === "tr") {
    
    
    // 处理行鼠标悬停事件
    console.log("鼠标悬停在行上");
  }
});

These are examples of common table event listeners, you can listen to other events or customize event handlers as needed. Please note that in actual applications, you may need to make appropriate adjustments based on specific HTML structure and needs.

Practical development

function change(table) {
    
    
    var row = table.insertRow(table.rows.length);
    for (var j = 0; j < table.rows[0].cells.length; j++) {
    
    
        var cell = row.insertCell(j);
        cell.innerHTML = table.rows[0].cells[j].innerHTML;
    }
    table.deleteRow(0);
}

function tableInterval(id) {
    
    
    var table = document.getElementById(id);
    change(table);
}

How to improve, to achieve mouse over, stop scrolling; mouse off, continue scrolling

To achieve this functionality, you can use javascript mouseoverand mouseoutevents. mouseoverEvents are fired when the mouse rolls over the element, and mouseoutevents are fired when the mouse leaves the element.

First, you need to add an element to your HTML to trigger these events. For example, you can add a transparent layer above the table. When the mouse hovers over this layer, the scrolling stops; when the mouse leaves, the scrolling continues.

Here is an improved code:

  <table class="table_power" border="0" cellspacing="0" cellpadding="0" id="table_power">
                        <thead>
                        <th class="l_radius">序号</th>
                        <th class="r_radius">位置</th>
                        <th class="l_radius">今天</th>
                        <th class="td_color">昨天</th>
                        <th class="td_color">前天</th>
                        <th class="r_radius td_color">日环比</th>
                        <th class="l_radius">2023年09月</th>
                        <th class="td_color">2023年08月</th>
                        <th class="td_color">2023年07月</th>
                        <th class="r_radius td_color">月环比</th>
                        <th class="l_radius">2023年</th>
                        <th class="td_color">2022年</th>
                        <th class="td_color">2021年</th>
                        <th class="r_radius td_color">年环比</th>
                        <th class="l_radius">A相电流</th>
                        <th>B相电流</th>
                        <th>C相电流</th>
                        <th class="r_radius">电功率</th>
                        <th class="all_radius td_color">数据时间</th>
                        <th class="all_radius td_color">查看</th>
                        </thead>
                        <tbody id="montTables"></tbody>
                    </table>

    //滚动表格
    var overlay = document.getElementById("table_power");
    var intervalId =  setInterval("tableInterval(\"montTables\")", 3000);

    // 当鼠标滑过overlay时停止滚动表格
    overlay.addEventListener('mouseover', function() {
    
    
        console.log(1)
    clearInterval(intervalId);
    });

    // 当鼠标离开overlay时继续滚动表格
    overlay.addEventListener('mouseout', function() {
    
    
        console.log(2)
        intervalId = setInterval("tableInterval(\"montTables\")", 3000);
    });

---

@leaking sometimes