Javascript 表格操作实现代码- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > Javascript 表格操作实现代码

Javascript: 用jquery实现学校的校历(asp.net+jquery ui 1.72); 使用JQUERY Tabs插件宿主IFRAMES; jquery 简短右键菜单多浏览器兼容; JQery 渐变图片导航效果代码漂亮; HTML node相关的一些资料整理; JavaScript与DropDownList 区别分析; 20个非常棒的Jquery实用工具国外文章; Firefox+FireBug使JQuery的学习更加轻松愉快; firefox firebug中文入门教程脚本之家新年特别版; firefox插件Firebug的使用教程; javascript addLoadEvent函数说明; javascript getElementsByClassName 和js取地址栏参数; 让firefox支持IE的一些方法的javascript扩展函数代码; javascript 多种搜索引擎集成的页面实现代码; Javascript 模拟点击事件(点击链接与html点击) 兼容IE/Firefox; javascript 模拟点击广告; javascript 精确获取样式属性（上）; javascript 精确获取样式属性（下）; javascript 精确获取页面元素的位置; javascript 可控式透明特效实现代码

No. « ‹ 257 258 259 260 › »

技术文章搜索

关键字

Javascript 表格操作实现代码

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 166 ::

收藏到网摘: n/a

JavaScript 高级语法介绍 javascript 获取鼠标的绝对位置 event

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 全选提示:你可先修改部分代码,再按运行]

JavaScript 高级语法介绍 javascript 获取鼠标的绝对位置 event

Javascript 表格操作实现代码

评论 (0) All