社区学习工具库休闲

简体中文

首页 > web前端 > js教程 > Javascript 表格操作实现代码_javascript技巧

Javascript 表格操作实现代码_javascript技巧

WBOY

发布： 2016-05-16 18:51:28

原创

1080 人浏览过

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

相关标签：

javascript 表格操作

来源：php.cn

上一篇：javascript 缓冲效果实现代码_javascript技巧下一篇：firefo xml 读写实现js代码_javascript技巧

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

作者最新文章

什么是 NullPointerException，如何修复它？

2024-10-22 09:46:29
从新手到程序员：您的旅程从 C 基础知识开始

2024-10-13 13:53:41
使用PHP解锁网络开发：初学者指南

2024-10-12 12:15:51
揭秘 C：为新程序员提供一条清晰简单的道路

2024-10-11 22:47:31
释放您的编码潜力：绝对初学者的 C 编程

2024-10-11 19:36:51
释放你内心的程序员：C 绝对初学者

2024-10-11 15:50:41
使用 C 自动化您的生活：适合初学者的脚本和工具

2024-10-11 15:07:41
PHP 变得简单：Web 开发的第一步

2024-10-11 14:21:21
使用 Python 构建任何东西：释放创造力的初学者指南

2024-10-11 12:59:11
编码的关键：为初学者释放 Python 的力量

2024-10-11 12:17:31

最新问题

仅 CSS 方法可在单击时动态修改图像 src，无需使用 JavaScript 我需要仅使用css更改鼠标单击时图像的src喜欢img:active{}

来自于 2024-04-06 19:25:49

0

1

505

放大 d3.js 时散点图点不会保持值这是我第一次使用d3.js，所以请耐心等待。我在vue.js文件中将其作为纯JavaScript实现。我正在尝试制作具有缩放功能的散点图。到目前为止，我几乎一切正常，但当我缩放时，...

来自于 2024-04-06 18:16:26

0

1

403

供应商特定伪元素上的 JavaScript 悬停事件我有以下htmlinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',functi...

来自于 2024-04-06 15:35:24

0

1

274

使用 Javascript / Jquery 提交表单且不带按钮我试图通过调用JavaScript函数并使用JQUERY/PHP执行表单来提交没有按钮的表单。我希望表单在后端静默执行，而无需重新加载页面。不幸的是，它不断返回JavaScript...

来自于 2024-04-06 14:54:03

0

2

421

使用'折叠显示”类自定义 Bootstrap 手风琴标题的外观我想设置具有类collapseshow的面板的卡标题样式。在此示例中，它是第一个面板。我尝试使用CSS来使用.accordion.card.card-headerbutton.bt...

来自于 2024-04-06 12:53:11

0

1

376

相关专题

更多>

热门推荐

热门教程

更多>

相关教程

热门推荐

最新课程

最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)

1423541
php入门教程之一周学会PHP

4269090
JAVA 初级入门视频教程

2539337
小甲鱼零基础入门学习Python视频教程

507679
PHP 零基础入门教程

862942

最新下载

更多>

网站特效

网站源码

网站素材

前端模板