Javascript 表格操作实现代码

更新时间：2009年06月16日 23:00:57 作者：

Javascript操作表格包括获取值，创建表格

<input id="txtping" /> <table width="400" border="0" cellspacing="0" cellpadding="1" id="ch"> <tr> <td> 中国北京</td> </tr> <tr> <td> 中国上海</td> </tr> </table> <script language="javascript" type="text/javascript"> var tabobj = document.getElementById("ch"); //获取 Table 对象 for( var i=0; i<tabobj.rows.length;i++) //给单元格添加事件 { tabobj.rows[i].onclick=function(){document.getElementById("txtping").value = this.innerText;}; //取值 tabobj.rows[i].onmouseover=function(){this.style.background="#0EF";}; //行变色 tabobj.rows[i].onmouseout=function(){this.style.background="";}; tabobj.rows[i].style.cursor="pointer"; } function sets(obj) { document.getElementById("div1").style.top = document.getElementById(obj).offsetTop + document.getElementById(obj).offsetHeight + "px"; document.getElementById("div1").style.left = document.getElementById(obj).offsetLeft + document.body.scrollLeft + "px"; } //javascript添加table function creatTable() { //用createElement函数创建tbody,tr,td,textNode元素 //关于各元素的意义不在此描述 var tables = document.createElement("table"); tables.setAttribute("id","chen"); tables.setAttribute("border","1px"); tables.setAttribute("width","300px"); var tbody= document.createElement("tbody"); var row=document.createElement("tr"); var cell=document.createElement("td"); var textNode=document.createTextNode("test"); //因为各元素都是节点与子节点的关系用appendChild()函数将各节点连接起来 cell.appendChild(textNode); row.appendChild(cell); tbody.appendChild(row); tables.appendChild(tbody); document.getElementById("div3").appendChild(tables); //添加到id号为div3的层 } //给每个单元格添加方法 for(var j=0;j< tabobj.rows.length;j++)//行 { for(var h=0;h< tabobj.rows.item(0).cells.length;h++) //单元格 { tabobj.rows[j].cells[h].onclick=function(){ch(this);}; } } </script>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

js操作DOM--添加、删除节点的简单实例
下面小编就为大家带来一篇js操作DOM--添加、删除节点的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-07-07
JS小功能（button选择颜色)简单实例
这篇文章主要介绍了button选择颜色简单实例，有需要的朋友可以参考一下
2013-11-11
JavaScript 组件之旅（一）分析和设计
毫无疑问，JavaScript 是一种非常灵活的脚本语言，有时候它像一只难以驯服的野马——你受益于它的灵活性的同时，也要时刻提防它变得失去控制
2009-10-10
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
对于访客，如果登录您网站，浏览器就立刻崩溃，我想这对谁都是无法容忍的，对此总结了网站导致浏览器崩溃的原因
2010-04-04
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
这篇文章主要介绍了改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-07-07
js+canvas实现简单扫雷小游戏
这篇文章主要为大家详细介绍了js+canvas实现简单扫雷小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-02-02
浅谈js中test()函数在正则中的使用
下面小编就为大家带来一篇浅谈js中test()函数在正则中的使用。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-08-08
用YUI做了个标签浏览效果
用YUI做了个标签浏览效果...
2007-02-02
javascript设计模式 – 状态模式原理与用法实例分析
这篇文章主要介绍了javascript设计模式 – 状态模式,结合实例形式分析了javascript状态模式相关概念、原理、用法及操作注意事项,需要的朋友可以参考下
2020-04-04
js 获取html5的data属性实现方法
下面小编就为大家带来一篇js 获取html5的data属性实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-07-07

Javascript 表格操作实现代码

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具