Javascript 表格操作实现代码

时间:2020-05-12 人气:0

<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需刷新才能执行]

加载全部内容