javascript(table的监听事件、tr定时滚动并实现鼠标悬停功能)

table的监听事件

在JavaScript中，你可以使用事件监听器来监听HTML表格的特定事件。下面是一些常见的表格事件和相应的JavaScript代码示例：

1. 点击事件（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("行被点击了");
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13

2. 更改事件（Change）：

要监听表格的更改事件，通常需要与表单元素（如输入框、下拉列表等）结合使用。当表单元素的值发生变化时，可以触发更改事件。

<table id="myTable">
  <tr>
    <td><input type="text" id="txt1">td>
  tr>
table>
1
2
3
4
5

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

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

3. 鼠标悬停事件（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("鼠标悬停在行上");
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13

这些是常见的表格事件监听示例，你可以根据需要监听其他事件或自定义事件处理程序。请注意，在实际应用中，你可能需要根据具体的HTML结构和需求进行适当的调整。

实战开发

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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13

如何改进下，实现鼠标滑过，停止滚动；鼠标离开，继续滚动

为了实现这个功能，你可以使用JavaScript的mouseover和mouseout事件。mouseover事件会在鼠标滑过元素时触发，而mouseout事件则会在鼠标离开元素时触发。

首先，你需要在你的HTML中添加一个元素来触发这些事件。例如，你可以在表格的上方添加一个透明的层，当鼠标滑过这个层时，停止滚动；鼠标离开时，继续滚动。

下面是一个改进后的代码：

  <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

    //滚动表格
    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);
    });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

---

@漏有时