js中怎么为每个创建的td添加onclick事件？

JavaScript06

js中怎么为每个创建的td添加onclick事件？,第1张

直接在td中增加onclick属性。

过程：

1、定一个td的onclick函数

function TdClick(){//定义一个td的onclick函数

}

2、创建td，并添加onclick事件

var td1 = document.createElement('td')//创建一个td节点

td1.onclick=TdClick//添加td的onclick函数

当点击某一行的时候，能得到这个tr的对象，可以通过这个对象得到该行的所有td对象，这时候可以通过一个序号来获取这一行的某个td的数据。

下面以代码来解释：

<table id="tb">

<tr>

<td>a</td><td>b</td><td>c</td>

</tr>

<tr>

<td>aa</td><td>bb</td><td>cc</td>

</tr>

</table>

<script>

//以jquery为例实现点击某行获得某个td的数据。

$( "#tb tr" ).click( function() {//给每行绑定了一个点击事件：

var td = $( this ).find( "td" )

//this指向了当前点击的行，通过find我们获得了该行所有的td对象。

//题中说到某个td，为了演示所以我们假设是要获得第3个td的数据。

var data = td.eq( 2 ).html()

//通过eq可以得到具体的某个td对象，从而得到相应的数据

} )

</script>

建议使用jquery插件。方法很简单。

$("td").click(function(){

    $("div").toggle()

})

用原生的需要多写几行了

var td=document.querySelector("td")

var div=document.querySelector("div")

td.addEventListener("click",toggle,false)

function toggle(){

   var isShow=div.style.display

   div.style.display=isShow=="none"?"":"none"

}