Rumah > hujung hadapan web > tutorial js > js生成动态表格并为每个单元格添加单击事件的方法_javascript技巧

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

WBOY
Lepaskan: 2016-05-16 16:52:30
asal
1454 orang telah melayarinya

html:

复制代码 代码如下:



Demo










script:
复制代码 代码如下:

<script> <BR>function getColumnDetail(column){ <BR>column.style.color = "blue"; //将被点击的单元格设置为蓝色 <BR>alert(column.innerHTML); //弹出被点单元格里的内容 <BR>} <BR><!--trLineNumber为动态表格行数,tdData为动态表格每行单元格的数据,数据类型为数组--> <BR>function setTable(trLineNumber,tdData){ <BR>var _table = document.getElementById("table"); <BR>var _row; <BR>var _cell; <BR>for (var i = 0; i < trLineNumber; i++) { <BR>_row = document.createElement("tr"); <BR>document.getElementById("table").appendChild(_row); <BR>for(var j = 0; j < tdData.length; j++) { <BR>_cell = document.createElement("td"); <BR>_cell.onclick= function(){getColumnDetail(this)}; //为每个单元格增加单击事件 <BR>_cell.innerText = tdData[j]; <BR>_row.appendChild(_cell); <BR>} <br><br>} <BR>} <BR></script>

调用setTable(trLineNumber,tdData)这个函数即可动态生成一个表格,并且为每个单元格都设置了一个单击事件,触发后,弹出被点单元格内容,同时数据变蓝
Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan