JS为表格每行添加点击事件

最新推荐文章于 2021-07-25 00:40:39 发布

afterrains

最新推荐文章于 2021-07-25 00:40:39 发布

阅读量1.4w

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/happy_jijiawei/article/details/50735370

版权

js 专栏收录该内容

107 篇文章 2 订阅

订阅专栏

<table>
<tr>
<td οnclick=clickaction(this)>td1</td>
<td οnclick=clickaction(this)>td2</td>
</tr>
</table>

js部分:
function clickaction(td){
alert(td.innerText);
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

afterrains

关注关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
JS为表格每行添加点击事件

td1td2js部分:function clickaction(td){alert(td.innerText);}
复制链接

扫一扫

专栏目录

js给td添加html,JS初学者，用JS画的一个table 给td添加一个onclick()事件怎么传值

weixin_29163581的博客

06-17

1085

JS菜鸟求助，用JS画的一个table 给td添加一个onclick()事件如何传值？functionf1(PARENT_ID){$.ajax({type:"POST",url:"goods/test.do",//请求的后台地址data:"PARENT_ID="+PARENT_ID,//前台传给后台的参数success:function(jsonStr){//jsonStr:返回值/...

js追加html 有点击事件,jQuery为动态按钮、div、tr添加点击(click)事件

weixin_34012046的博客

05-31

1730

在动态添加的元素HTML标记上绑定点击事件，这篇文章解释了如何为动态添加元素添加click事件。在jQuery点击事件中，我们可以简单地使用.click()方法，它可以很好地工作，但是当你添加动态HTML并尝试为它实现点击事件时，那么你就会遇到问题例如.click()无效。 .click()没有工作因为它没有加载到dom上，所以现在我们要做的是使用jQuery v1.7的.on()方法。 .on(...

1 条评论您还未登录，请先登录后发表或查看评论

Js为table的每一行添加点击事件

yhj198927的博客

04-28

5457

Html代码： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>交道口街道南锣鼓巷管理平台</title> </head> <body> <table...

【js】js实现自定义表格行点击事件

时光纪

12-25

2589

1.获取后台data数据 2.前端创建表格并填充数据 a.html页面预留table： <div class="blue-title mt"> <span class="fl">详细地址</span> </div> <div class=&quot

js修改table中Td的值(定义td的单击事件)

10-27

单击事件，将Td内容更新为一个Div，其中装载了一个Text，用于用户输入新的Td的值，一个确定按钮，一个取消按钮，用于保存或取消用户的输入内容

js给table每个tr添加双击事件

热门推荐

junshangshui的专栏

05-06

3万+

无标题页 function Test(){ var rows=document.getElementById("table1").rows; if(rows.length>0){ for(var i=1;i<rows.length;i++){ (function(i){

js生成动态表格并为每个单元格添加单击事件的方法

10-26

主要介绍了使用javascript生成动态表格并为每个单元格添加单击事件,需要的朋友可以参考下

JQuery实现表格动态增加行并对新行添加事件

10-25

- 在表格的每个单元格中，可能需要包含按钮或其他输入元素，以便用户触发添加新行的事件。 2. **事件绑定**： - 在新行被添加后，我们需要确保已有的事件监听器能够正确地绑定到这些新元素上。可以使用jQuery的`...

js下为表格内部动态添加行的代码

10-29

在JavaScript中，动态添加表格行是一项常见的任务，尤其是在处理用户交互或动态数据展示时。在这个场景中，我们需要在表格的中间插入一行，而不仅仅是追加到末尾。这个功能可以通过操作DOM（文档对象模型）来实现。...

基于JavaScript实现动态添加删除表格的行

10-22

当用户点击“添加行”按钮，新的行会被添加到表格的末尾，每个新行都有删除链接。点击删除链接，对应的行就会被移除。这种动态操作表格行的方法在Web应用中十分实用，例如在管理界面中，用户可以方便地添加或删除...

js动态创建table点击按钮dom table tr添加操作

11-11

js动态创建table点击按钮dom table tr添加操作

JS动态创建表格，动态设置属性，动态添加事件

bdemq的专栏

03-07

4257

1、inserRow()和insertCell()函数 insertRow()函数可以带参数，形式如下： insertRow(index)：index从0开始　　这个函数将新行添加到index的那一行前，比如insertRow(0),是将新行添加到第一行之前。默认的insertRow()函数相当于insertRow(-1)，将新行添加到表的最后。一般我们在使用的时候都是：obj

动态添加表格点击事件

weixin_45799001的博客

12-14

526

div部分 <table class="layui-table"> <thead> <tr> <th>模块</th> <th>操作</th> </tr> </thead> <tbody id="tbody"> </tbody> </table> js 部分 $.ajax({ url: 'queryModuleByPid?pid

html tr 双击事件,js双击table中的行得到行内信息的方法

weixin_31174671的博客

06-05

958

要实现这个功能，需要做到以下三点：1、要给返回值的单元格设置id属性(即指定对象名，以便JS调用)2、定义一个函数，用于单击里调用这个函数。3、在标签中指定单击事件onclick调用2定义的函数。代码如下：复制代码代码示例:js双击table中的行得到行内信息-www.jquerycn.cnfunction clickTR(n){var a=document.getElementById("td...

原生js事件批量绑定-事件委托

sinat_32290679的博客

09-20

7375

我们常常会遇到一个需求，就是给表格里面的每个特定的td绑定一个事件.遇到这种需求，很多人基本都是直接上如下代码： var td = document.getElementsByTagName("td"); for( let i =0; i<td.length; i++){ td[i].onclick = function(){ //事件处理 }

js动态添加点击事件的两种方法

h0713的博客

07-25

2万+

js动态添加点击事件或其他事件（这里以点击事件为例）第一种：加载 js文件时自动添加，这种方法可以免去html元素内的onclick等属性一长串的字符，也方便一些像我这样初级的查看源代码时找不着北；但缺点是只能在页面启动时加载一次（不知道这样表述准不准确，反正我能懂就好了），想要灵活的添加移除还不方便，案例代码如下： var redmove=document.getElementById("rolemove"); redmove.addEventListener('click',function(){…

html表格td的内容修改,js修改table中Td的值(定义td的单击事件)

weixin_36365795的博客

06-03

880

项目做完，在测试验收时，用户突然提出，可以更改查询结果，便于打印。隐藏工程错误。但是这个时候提要求，比较头痛，后来，想了想还是用前台代码，这样，只要在项目的JS文件中，加入以下几个函数，便可以解决了。/*页面装载时，为每个td增加单击事件，这样，就可以不用对每个页面进行更改。*/function ReWritable(){var tbmian=document.getElementById("tb...

js 拼接表格，行绑定点击事件，点击行获取该行对应的json数据

最新发布

05-27

在 JavaScript 中，我们可以使用字符串拼接的方式动态生成表格，并为表格的行绑定点击事件，以获取该行对应的 JSON 数据。以下是一个示例： ```javascript // 定义一个 JSON 数据数组 var data = [ { name: "张三", age: 18, gender: "男" }, { name: "李四", age: 20, gender: "女" }, { name: "王五", age: 22, gender: "男" } ]; // 创建一个空的 table 元素 var myTable = document.createElement("table"); // 创建表头行 var headerRow = myTable.insertRow(); // 添加表头单元格 var nameHeader = headerRow.insertCell(); nameHeader.innerHTML = "姓名"; var ageHeader = headerRow.insertCell(); ageHeader.innerHTML = "年龄"; var genderHeader = headerRow.insertCell(); genderHeader.innerHTML = "性别"; // 循环遍历 JSON 数据数组，创建表格行 for (var i = 0; i < data.length; i++) { // 创建表格行 var row = myTable.insertRow(); // 添加表格单元格 var nameCell = row.insertCell(); nameCell.innerHTML = data[i].name; var ageCell = row.insertCell(); ageCell.innerHTML = data[i].age; var genderCell = row.insertCell(); genderCell.innerHTML = data[i].gender; // 为表格行绑定点击事件，并传入对应的 JSON 数据 row.onclick = function() { handleClick(data[i]); } } // 将表格添加到页面中 document.body.appendChild(myTable); // 点击事件的处理函数 function handleClick(data) { alert(JSON.stringify(data)); } ``` 在上面的示例中，我们首先定义了一个 JSON 数据数组 `data`，其中包含了三个对象，每个对象都有 `name`、`age` 和 `gender` 三个属性。接着，我们创建了一个空的 `table` 元素，并动态生成了表头行和表格行，将 JSON 数据数组中的数据填充到表格中。在为表格行绑定点击事件时，我们使用了闭包来保存对应的 JSON 数据，以便在点击事件的处理函数中获取。最后，我们将表格添加到页面中。当用户点击表格行时，点击事件的处理函数 `handleClick()` 将会被调用，并且将点击行对应的 JSON 数据传入其中。在这个处理函数中，我们使用 `JSON.stringify()` 方法将 JSON 数据转换成字符串形式，并使用 `alert()` 方法弹出这个字符串，从而实现了点击行获取 JSON 数据的功能。