动态加入table中tr的onclick事件

最新推荐文章于 2023-07-05 09:25:09 发布
最新推荐文章于 2023-07-05 09:25:09 发布 · 2.9k 阅读 · 1
标签
#JavaScript #HTML #ViewUI
本文介绍了一个使用JavaScript实现的简单表格操作示例，通过点击按钮可以向表格中添加新行，并为新添加的行设置点击事件。该示例展示了如何利用DOM操作来动态创建表格元素，并附带简单的交互功能。

<HTML>  
  <HEAD>  
  <TITLE>   New   Document   </TITLE>  
  <META   NAME="Generator"   CONTENT="EditPlus">  
  <META   NAME="Author"   CONTENT="">  
  <META   NAME="Keywords"   CONTENT="">  
  <META   NAME="Description"   CONTENT="">  
  </HEAD>  
   
  <BODY>  
  <SCRIPT   LANGUAGE="JavaScript">  
  <!--  
  function   addrow()  
  {  
       
          var   tr=document.all.item('showTable').insertRow();  
  for(var   i=0;i<3;i++)  
  {  
      the_cell=tr.insertCell(i);  
      the_cell.innerText="NewRow_"   +   the_cell.parentElement.rowIndex;  
  }  
   
          tr.onclick=   function(){doalter();};     //没有效果  
  }  
   
  function   doalter(){  
    alert('hi');  
  }  
   
  //-->  
  </SCRIPT>  
   
  <table   id="showTable">  
  </table>  
  <input   type=button   value=add   onclick="addrow()">  
  </BODY>  
  </HTML>  

TR 绑定的 onclick 事件，如何排除其中一些 TD 对onclick 事件的绑定
judyfun的专栏
01-20 9137
1111111 1111111 1111111 1111111 1111111 1111111 var td = document.getElementById("tb").getElementsByTagName("tr")[0].getElementsByTagName("td") for(var i = 0 ; i < td.length ; i ++) { td[i]
JQuery onclick()事件
Lisen的博客
08-28 3万+
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;script src="./jquery.js" type="text/javascript" charset="utf-8"&gt;&l
javascript函数报Uncaught ReferenceError: XXX is not defined
热门推荐
西木风落
09-17 13万+
在写javascript函数的时候，JavaScript写在哪里？通常有三种形式：  1. 内部：Html网页的中；  2. 内部：Html网页的中；  3. 外部：外部JS文件里。  (1) 写在中   当浏览器载入网页Body部分的时候，就执行其中的Javascript语句，执行之后输出的内容就显示在网页中。 ... ....  (2)写在中   当不希望一载入HTML
js 动态创建table tr加事件
provocator的专栏
05-27 2212
<br />var tr = document.createElement("tr");<br />             tr.height = "30px";<br />             //tr.attachEvent('onClick',selectSchema(name));<br />             tr.onclick = function(){<br />                 functionname(name);<br />            
table后台动态添加tr，前台绑定事件
阿狸狸阿狸狸呀的博客
06-22 1136
业务需求更改，table中原本前台绑定已有元素事件，变成后台渲染元素，前台加事件原本用元素 on直接绑定，但是一直不起作用，查了相关资料，找到方法 $("table tbody").on("click",'tr a',function(){ layer.open({ title:'弹窗', type: 2, ...
动态显示，隐藏Table的tr
u010454294的博客
11-11 1384
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> html xmlns="http://www.w3.org/1999/xhtml">   head> meta co
table 添加 tr 的点击事件
dbsjack的博客
07-17 2万+
在&lt;table表格中为每一个&lt;tr添加一个点击或双击事件，并传参数： 方法传参可以通过直接传参，也可以通过对象传参：如下：  HTML代码： &lt;table id="contentTable" class="table table-bordered table-condensed"&gt; &lt;thead&gt; &lt;tr&gt; ...
table的tr动态增加（含html示例）
小码的博客
07-05 1913
点击增加后、清空输入台。增加一行 清空一行。增加 王五 男 21。
选中行的索引: <tr onclick="alert(this.rowIndex)"
我想我是海 冬天的大海 心情随风轻摆
04-08 1186
td与tr，onclick与mousedown的各自执行顺序
qq_26983555的博客
08-30 1271
1、td与tr，onclick与mousedown的各自执行顺序1、如果程序中同时对td和tr做不同的点击事件监听，不管td与tr监听事件的写法的前后顺序，程序都会先找到td的事件，然后执行td的事件，再执行tr的事件。 2、onclick与mousedown：因为mousedown是监听鼠标按下的哪一个时刻，onclick是监听点击完成的时刻。所以mousedown是在onclick执行的前面。
js基础总结——js 获取元素节点、js 绑定onclick事件、js 获取属性 修改属性值、js 获取子元素、js 改变css样式
qq_32886245的博客
07-14 3127
js dom操作 js 获取元素节点 一份document就是一棵节点树 // 1. 根据元素id名称获取dom, return→对象 document.getElementById('submit_btn') // 2. 根据元素标签名称获取dom, return→对象数组 document.getElementsByTagName ('ul') // 3. 根据元素class名称获取dom, return→对象数组 document.getElementsByClassName('menu acti
Vue动态加载元素，并给元素绑定事件
weixin_39407291的博客
04-22 1万+
结构： <table class="table"> <thead class="table_head"> <tr> <th>序号</th> <th>门店名&lt...
Tab栏 （addEventListener和onclick实践，与bind方法合用，指数增长监听事件）
shrimper
07-14 559
在学习bind方法时，尝试优化以前的Tab栏案例出现bug，如图所示：点击一次"+"新建Tab栏，第一次新建了一个Tab栏，第二次新建了两个Tab栏出现了。第三次4个。然后是8,16,32指数增长的怪异操作。一下两个关键函数 点击次数没变，Tab栏却成指数增长之前通过定义全局变量传入中的，没有问题。现在通过bind改变对应函数中this的是指向，省去that。 先看以下两种方法 (1)是会被同时注册的onclick覆盖的，触发后执行是被覆盖的事件 。 (2)则不会被覆盖 (3)会产生一个新的函数 fn
动态给table添加行点击事件
weixin_42787326的博客
01-09 3671
window.onload = function () { var trs = document.getElementsByTagName('tr'); for (let j = 0; j &lt; trs.length; j++) { trs[j].onclick = function()...
阻止某个<td>执行<tr>的onclick事件
weixin_34302798的博客
11-16 1880
2019独角兽企业重金招聘Python工程师标准>>> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值