【HTML】js Table单击事件，获取表格行和列及单元格数值的方法

厦门德仔

已于 2023-03-26 09:13:18 修改

阅读量9.6k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： # Css/Html 文章标签： JS html

于 2022-09-29 09:58:04 首次发布

本文链接：https://blog.youkuaiyun.com/david_520042/article/details/127101625

Css/Html 专栏收录该内容

51 篇文章

订阅专栏

这篇博客介绍了两种使用JavaScript为HTML表格添加点击事件的方法。第一种方法是通过循环遍历表格的行和列，为每个单元格单独绑定点击事件。第二种方法则是直接在表格元素上设置onclick事件，通过事件对象获取点击的行号和列号。这两种方法都可以实现实时响应单元格点击，并获取到相应的单元格值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一种方法：通过js来给table添加点击事件（如果表格新增行，就必须重新运行一次该代码，不然新增好，没有单击事件）

var Val=document.getElementById("tb_1");
            for(var i=0;i<Val.rows.length;i++)
            {
                var cells=Val.rows[i].cells;
                for(var j=0;j<cells.length;j++)
                {
                    cells[j].onclick=function()
                    {
                        mui.toast(this.innerHTML);　　　　//获取单击的值，但无法获取单击的行索引和列索引
                    }
                }
            }

第二种方法：

<table id="tb_1"  onclick="TabClick();">//给Tabel加上一个Onclick();事件
 function TabClick(){				　　　
 　var td = event.srcElement; // 通过event.srcElement 获取激活事件的对象 td 
 alert("行号：" + (td.parentElement.rowIndex) + "，列号：" + td.cellIndex); 
  td.innerHTML="dddd";　　　　　　　　//设置单击单元格的值			
  }