当前位置: 首页 > article >正文

JavaScript3*3表格实现每次点击只红一行

<script>
window.onload = function () {
    var myTd = document.getElementsByTagName("td");
    var currentlyHighlightedRow = null; // 用于存储当前高亮显示的行

    for (var i = 0; i < myTd.length; i++) {
        myTd[i].onclick = function () {
            // 获取当前点击的单元格的父节点(即行)
            var myTdParent = this.parentNode;

            // 如果已经有高亮显示的行,则取消其高亮
            if (currentlyHighlightedRow) {
                currentlyHighlightedRow.style.backgroundColor = "";
            }

            // 将当前点击的行设置为高亮显示
            myTdParent.style.backgroundColor = "red";

            // 更新当前高亮显示的行
            currentlyHighlightedRow = myTdParent;
        };
    }
}
</script>

//创建3*3表格

<table border="1" cellspacing="0" cellpadding="0">
    <tr>
        <td>Data1</td>
        <td>Data2</td>
        <td>Data3</td>
    </tr>
    <tr>
        <td>Data4</td>
        <td>Data5</td>
        <td>Data6</td>
    </tr>
    <tr>
        <td>Data7</td>
        <td>Data8</td>
        <td>Data9</td>
    </tr>
</table>
 


http://www.kler.cn/a/384507.html

相关文章:

  • Devops业务价值流:软件研发最佳实践
  • salesforce批量修改对象字段的四种方法
  • 基于Opencv的图像处理软件
  • 【网络原理】关于HTTP状态码以及请求的构造的哪些事
  • 使用匿名管道时出现程序一直运行问题
  • 基于C语言实现的图书管理系统
  • 渗透测试-Linux基础(1)
  • STM32 基于HAL库和STM32cubeIDE的应用教程(一)--安装环境
  • 优选算法精品课--滑动窗口算法(一)
  • 笔记--(网络3)、交换机、VLAN
  • 大数据治理:构建数据驱动的智能未来
  • Springboot集成syslog+logstash收集日志到ES
  • Linux -- 操作系统(软件)
  • 软件测试—功能测试详解
  • 智能家居的未来:AI让生活更智能还是更复杂?
  • 【Linux】- 权限(2)
  • RK3568笔记六十八:Yolov11目标检测部署测试
  • 【redis】redis缓存和数据库保证一致性的方案
  • 香港航空 阿里滑块 acw_sc__v3 分析
  • 10DSP学习-利用syscfg配置ADC,并使用EPWM触发转换
  • Excel打开Python创建的csv文件乱码
  • 《Kotlin实战》-第09章:泛型
  • 【人工智能】ChatGPT多模型感知态识别
  • oneplus6-build.md
  • 浏览器中的事件循环
  • KTHREAD结构-->ApcState