管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

Javascript 表格操作实现代码

<input id="txtping" /> 
<table width="400" border="0" cellspacing="0" cellpadding="1" id="ch"> 
<tr> 
<td> 
中国北京</td> 
</tr> 
<tr> 
<td> 
中国上海</td> 
</tr> 
</table> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20language%3D%22javascript%22%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Avar%20tabobj%20%3D%20document.getElementById(%22ch%22)%3B%20%2F%2F%E8%8E%B7%E5%8F%96%20Table%20%E5%AF%B9%E8%B1%A1%20%0D%0Afor(%20var%20i%3D0%3B%20i%3Ctabobj.rows.length%3Bi%2B%2B)%20%2F%2F%E7%BB%99%E5%8D%95%E5%85%83%E6%A0%BC%E6%B7%BB%E5%8A%A0%E4%BA%8B%E4%BB%B6%20%0D%0A%7B%20%0D%0Atabobj.rows%5Bi%5D.onclick%3Dfunction()%7Bdocument.getElementById(%22txtping%22).value%20%3D%20this.innerText%3B%7D%3B%20%2F%2F%E5%8F%96%E5%80%BC%20%0D%0Atabobj.rows%5Bi%5D.onmouseover%3Dfunction()%7Bthis.style.background%3D%22%230EF%22%3B%7D%3B%20%2F%2F%E8%A1%8C%E5%8F%98%E8%89%B2%20%0D%0Atabobj.rows%5Bi%5D.onmouseout%3Dfunction()%7Bthis.style.background%3D%22%22%3B%7D%3B%20%0D%0Atabobj.rows%5Bi%5D.style.cursor%3D%22pointer%22%3B%20%0D%0A%7D%20%0D%0Afunction%20sets(obj)%20%0D%0A%7B%20%0D%0Adocument.getElementById(%22div1%22).style.top%20%3D%20document.getElementById(obj).offsetTop%20%2B%20document.getElementById(obj).offsetHeight%20%2B%20%22px%22%3B%20%0D%0Adocument.getElementById(%22div1%22).style.left%20%3D%20document.getElementById(obj).offsetLeft%20%2B%20document.body.scrollLeft%20%2B%20%22px%22%3B%20%0D%0A%7D%20%0D%0A%2F%2Fjavascript%E6%B7%BB%E5%8A%A0table%20%0D%0Afunction%20creatTable()%20%0D%0A%7B%20%0D%0A%2F%2F%E7%94%A8createElement%E5%87%BD%E6%95%B0%E5%88%9B%E5%BB%BAtbody%2Ctr%2Ctd%2CtextNode%E5%85%83%E7%B4%A0%20%0D%0A%2F%2F%E5%85%B3%E4%BA%8E%E5%90%84%E5%85%83%E7%B4%A0%E7%9A%84%E6%84%8F%E4%B9%89%E4%B8%8D%E5%9C%A8%E6%AD%A4%E6%8F%8F%E8%BF%B0%20%0D%0Avar%20tables%20%3D%20document.createElement(%22table%22)%3B%20%0D%0Atables.setAttribute(%22id%22%2C%22chen%22)%3B%20%0D%0Atables.setAttribute(%22border%22%2C%221px%22)%3B%20%0D%0Atables.setAttribute(%22width%22%2C%22300px%22)%3B%20%0D%0Avar%20tbody%3D%20document.createElement(%22tbody%22)%3B%20%0D%0Avar%20row%3Ddocument.createElement(%22tr%22)%3B%20%0D%0Avar%20cell%3Ddocument.createElement(%22td%22)%3B%20%0D%0Avar%20textNode%3Ddocument.createTextNode(%22test%22)%3B%20%0D%0A%2F%2F%E5%9B%A0%E4%B8%BA%E5%90%84%E5%85%83%E7%B4%A0%E9%83%BD%E6%98%AF%E8%8A%82%E7%82%B9%E4%B8%8E%E5%AD%90%E8%8A%82%E7%82%B9%E7%9A%84%E5%85%B3%E7%B3%BB%E7%94%A8appendChild()%E5%87%BD%E6%95%B0%E5%B0%86%E5%90%84%E8%8A%82%E7%82%B9%E8%BF%9E%E6%8E%A5%E8%B5%B7%E6%9D%A5%20%0D%0Acell.appendChild(textNode)%3B%20%0D%0Arow.appendChild(cell)%3B%20%0D%0Atbody.appendChild(row)%3B%20%0D%0Atables.appendChild(tbody)%3B%20%0D%0Adocument.getElementById(%22div3%22).appendChild(tables)%3B%20%2F%2F%E6%B7%BB%E5%8A%A0%E5%88%B0id%E5%8F%B7%E4%B8%BAdiv3%E7%9A%84%E5%B1%82%20%0D%0A%7D%20%0D%0A%2F%2F%E7%BB%99%E6%AF%8F%E4%B8%AA%E5%8D%95%E5%85%83%E6%A0%BC%E6%B7%BB%E5%8A%A0%E6%96%B9%E6%B3%95%20%0D%0Afor(var%20j%3D0%3Bj%3C%20tabobj.rows.length%3Bj%2B%2B)%2F%2F%E8%A1%8C%20%0D%0A%7B%20%0D%0Afor(var%20h%3D0%3Bh%3C%20tabobj.rows.item(0).cells.length%3Bh%2B%2B)%20%2F%2F%E5%8D%95%E5%85%83%E6%A0%BC%20%0D%0A%7B%20%0D%0Atabobj.rows%5Bj%5D.cells%5Bh%5D.onclick%3Dfunction()%7Bch(this)%3B%7D%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E">

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程