JaveScript DOM操作之表格操作(1)

最新推荐文章于 2021-06-15 17:09:24 发布
最新推荐文章于 2021-06-15 17:09:24 发布
阅读量438 收藏 1
点赞数
分类专栏： java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014661569/article/details/45912665
版权
/**
* 隔行变色和鼠标经过高亮显示

*/


HTML文件代码



<!DOCTYPE html>
<html>
  <head>
    <title>domTableOperate.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/domTableOperate.js"></script>
  </head>
  <body>
    <table  border="1" width="500px;" id="tab">
<thead>
<tr>
<td>ID</td>
<td>NAME</td>
<td>AGE</td>
<td>OPERATE</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>tom</td>
<td>23</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>wsm</td>
<td>24</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>ali</td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>lisi</td>
<td>27</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>alid</td>
<td>18</td>
<td></td>
</tr>
<tr>
<td>6</td>
<td>skd</td>
<td>33</td>
<td></td>
</tr>
<tr>
<td>7</td>
<td>sawm</td>
<td>26</td>
<td></td>
</tr>
<tr>
<td>8</td>
<td>tim</td>
<td>20</td>
<td></td>
</tr>
</tbody>
    </table>

   </body>

</html>


js文件代码

window.onload = function(){

var otable = document.getElementById('tab');
    var name = otable.tBodies[0].rows[1].cells[1].innerHTML;
    var style = '';
    for(var i=0;i<otable.tBodies[0].rows.length;i++){
    otable.tBodies[0].rows[i].onmouseover = function(){
    style= this.style.background;
    this.style.background = 'green';
    };
    otable.tBodies[0].rows[i].onmouseout = function(){
    this.style.background = style;
    };
    //隔行变色
    if(i%2){
    otable.tBodies[0].rows[i].style.background = '#CCC';
    }else{
    otable.tBodies[0].rows[i].style.background = '';
    }
    }

}

----Neal----
关注
专栏目录
（29）使用DOM添加表格数据
虚心求学_一点一滴
07-19 1337
使用DOM创建新元素，  window.onload=function () { var oTab=document.getElementById('tab1'); var oBtn=document.getElementById('btn1'); var oName=document.getElementById('name'); var oAge=docum
JavaScript Dom 案例-动态表格的添加和删除(一)
ontheroad1024的博客
12-18 1208
案例知识点关键字: Document,Node,Element,innerHTML,onclick 基本代码如下,这是一个目前只有HTML和CSS的的页面效果: 代码如下: Title <table> <caption>信息表</ca...
javaScript DOM操作技术
漫长学习路
06-16 3034
在一般情况下我们操作DOM都比较简单明了，尤其是jquery出来之后，我们会发现操作DOM变得如此简单，但是也会有许多隐藏的坑，所以有时候操作DOM也并非想象中那么简单； 简单而常用的操作： 访问节点 document.getElementById()    根据Id获取元素节点 document.getElementsByName()    根据name获取元素节点 docum
JavaWeb——JavaScript精讲之DOM、BOM对象与案例实战（动态添加删除表格）
数字世界 万物互联
05-21 863
上一博文种讲解了JavaScript基础的ECMAScript，包括基本语法和部分对象，本文中继续讲解JavaScript中比较重要的两部分内容BOM、DOM及事件，后文中有对应的实战练习。 1、DOM简单学习 DOM是用来控制html文档的内容的： 1）document.getElementById("id值")：通过元素id获取元素对象Element。 2）操作Element对象： 修改属性值：要明确获取的对象是哪一个，再查看API，找其中有哪些属性可以设置； 修改标签体内容：通过属性in...
DOM操作XML文档向表格添加数据.rar
03-23
DOM操作XML文档向表格添加数据.rarDOM操作XML文档向表格添加数据.rarDOM操作XML文档向表格添加数据.rarDOM操作XML文档向表格添加数据.rar
JavaScript DOM操作表格案例
侯春强的博客
10-14 682
使用DOM创建表格 方式一：（JavaScript DOM创建表格） Title #outer { width: 500px; height: 500px; margin: auto; } onload = functio
JavaScript DOM操作表格及样式
12-12
一 操作表格 标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTMLDOM来操作它; // 使用DOM来创建表格; var table = document.createElement('table'); table.border = 1; table.width = 300; ...
javascript DOM操作之动态删除TABLE多行
12-02
在JavaScript中，动态地删除HTML表格（TABLE）中的多行数据是一种常见的DOM操作。DOM（文档对象模型）是HTML和XML文档的编程接口，它允许我们通过脚本编程的方式动态地修改文档结构、样式和内容。 首先，需要了解...
javascript操作表格
12-09
在实际开发中，JavaScript操作表格通常涉及到DOM（Document Object Model）操作，例如`document.getElementById()`、`innerHTML`属性、`appendChild()`、`removeChild()`等方法。此外，为了提供更好的用户体验，可能...
JavaScript DOM操作表格与样式实战
"这篇文档主要讨论了如何使用JavaScript DOM来操作HTML中的表格及其样式。通过DOM，我们可以创建、修改和管理表格元素，如`<table>`、`<caption>`、`<thead>`、`<tbody>`、`<tr>`、`<th>`和`<td>`等。此外，还提到了...
Dom-创建表格-使用表格对象
qq_34734520的博客
06-05 363
web-strom开发 1.创建表格的2种方法 创建表格 /*table.css文件在文章末尾*/ /*@import url(table.css);错误提示*/ function crtTable(){ //创建表格节点 var oTabNode=doc
java document创建节点_HTML中表格动态添加_动力节点Java学院整理
weixin_33573700的博客
02-16 565
废话不多说了，直接给大家贴代码了，具体代码如下所示：TableFirst NameLast Name 张三function add() {var trObj = document.createElement("tr");trObj.id = new Date().getTime();trObj.innerHTML = " ";document.getElementById("tb").append...
html中用js操作表格,原生js中用DOM操作table以及表格搜索功能
weixin_34471172的博客
06-15 447
DOM中table的便捷操作tBobies(数组) tHead tFoot rows(行) cells(单元格)ID姓名年龄1张三23window.onload = function () {var oTable = document.getElementById('table1')alert(oTable.getElementsByTagName('tbody')[0].getElementsB...
RCP中带复选框的表格应用
大步流星
03-21 471
首先给出效果图：       本例主要使用的是JFace中的CheckboxTableViewer，废话少说，直接上代码：  /**  * 创建一个带复选框的表格  */ public void createCheckTable() {    // 注意，这里要选择SWT.CHECK风格，这样表格才有复选框  Table table = new Table(parentComp...
table 的tBodies
ISaiSai的专栏
10-02 8468
a.tBodies[0].rows[0].cells[0] 一个table 可以有多个 tbody
数据挖掘（三）相关数据集资源
最新发布
10-27
数据挖掘（三）相关数据集资源
《GNU_Linux环境高级编程》.pdf
10-27
《GNU_Linux环境高级编程》.pdf
JavaScript DOM操作表格与样式完全指南
"这篇文档详细阐述了如何使用JavaScript DOM来操作HTML中的表格及其样式，适合对JavaScript和DOM操作感兴趣的开发者参考学习。" 在JavaScript中，DOM（Document Object Model）是HTML和XML文档的一种编程接口，它...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值