直接上菜咯。。。

以下为 HTML 表格源码：

 <html>

     <head>

         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

         <title>JS-006-表格元素操作</title>

         <script type="text/javascript" src="common.js"></script>

         <script type="text/javascript" src="test.js"></script>

         <link rel="stylesheet" type="text/css" href="global.css">

     </head>

     <body>

         <div>

             <h4>表格操作</h4>

             <ul>

                 <li>获取表格的行数：document.getElementById("study").children[0].rows.length</li>

                 <li>获取表格的列数：document.getElementById("study").children[0].rows[row].cells.length</li>

                 <li>获取单元格的值：cell.innerHTML</li>

                 <li>备注：当表格中存在单元格合并的情况下，表格的行列数会相对应减少，顺序：从上到下，从左到右</li>

                 <li>&nbsp;&nbsp;&nbsp;行内合并：被合并的列对应的原值将不存在</li>

                 <li>&nbsp;&nbsp;&nbsp;列内合并：被合并的行对应的原值将不存在</li>

             </ul>

             <table id="study" width="400" border="1">

                 <tr>

                     <th></th>

                     <th>周一</th>

                     <th>周二</th>

                     <th>周三</th>

                     <th>周四</th>

                     <th>周五</th>

                     <th>周六</th>

                     <th>周日</th>

                 </tr>

                 <tr>

                     <th>第一节</th>

                     <td>政治<span sytle="color:red">test</span></td>

                     <td>物理</td>

                     <td>化学</td>

                     <td>数学</td>

                     <td>体育</td>

                     <td>游泳</td>

                     <td>钢琴</td>

                 </tr>

                 <tr>

                     <th>第二节</th>

                     <td>外语</td>

                     <td>艺术</td>

                     <td>高数</td>

                     <td>线代</td>

                     <td>马哲</td>

                     <td rowspan="3">拓展</td>

                     <td>爬山</td>

                 </tr>

                 <tr>

                     <th>第三节</th>

                     <td>厚黑</td>

                     <td>财会</td>

                     <td>音乐</td>

                     <td>美术</td>

                     <td>武术</td>

                     <td>攀岩</td>

                 </tr>

                 <tr>

                     <th>第四节</th>

                     <td>长安</td>

                     <td>宝马</td>

                     <td>法拉利</td>

                     <td>劳斯莱斯</td>

                     <td>悍马</td>

                     <td>蹦极</td>

                 </tr>

                 <tr>

                     <th>第五节</th>

                     <td>百达翡丽</td>

                     <td>江诗丹顿</td>

                     <td>宝玑</td>

                     <td>浪琴</td>

                     <td>伯爵</td>

                     <td colspan="2">CS75</td>

                 </tr>

                 <tr>

                     <th>第六节</th>

                     <td>selenium</td>

                     <td>python</td>

                     <td>java</td>

                     <td>TestNG</td>

                     <td>maven</td>

                     <td>jekins</td>

                     <td>fitness</td>

                 </tr>

                 <tr>

                     <th>第七节</th>

                     <td>HTML</td>

                     <td>PHP</td>

                     <td>JavaScript</td>

                     <td></td>

                     <td>XML</td>

                     <td></td>

                     <td></td>

                 </tr>

                 <tr>

                     <th>第八节</th>

                     <td>Excel</td>

                     <td></td>

                     <td>CSV</td>

                     <td>properties</td>

                     <td>md</td>

                     <td></td>

                     <td></td>

                 </tr>

             </table>

             <input class="table" id="row" type="text"><input class="table" id="col" type="text">

             <input id="get_table_text" type="button" value="取值" onclick="get_table_text();"><input id="t_text" type="text">

             <input id="get_table_text" type="button" value="改变单元格样式" onclick="change_table_css();">

         </div>

         <div>

             <br><br><br><br>

             <a href="http://www.w3school.com.cn/jsref/dom_obj_style.asp" target="_blank">HTML DOM Style 对象</a>

         </div>

     </body>

 </html>

以下为 HTML 源码调用 js 函数 get_table_text() 的源码：

以下为 HTML 源码调用 js 函数 change_table_css() 的源码：

以下为具体的页面展现，及获取单元格值的 js 展示：

至此， JS-006-表格元素操作 顺利完结，希望此文能够给初学 JavaScript 的您一份参考。

最后，非常感谢亲的驻足，希望此文能对亲有所帮助。热烈欢迎亲一起探讨，共同进步。非常感谢！ ^_^

JS-006-表格元素操作的更多相关文章

  1. JS 页面表格的操作

    var showObj = null;var arr = [ ['编号','姓名','性别','年龄','备注','操作'], ['1','lisi','nan','12','66666'], ['2 ...

  2. SVG.js 元素操作整理（二）-Transform

    一.transform()获取或设置矩阵变换 var draw = SVG('svg1').size(300, 300); //Transforming SVG元素矩阵变换 var rect = dr ...

  3. GSAP JS基础教程--TweenLite操作元素的相关属性

    今天来学习用TweenLite操作元素的各种属性,以Div为例,其他元素的操作也是一样的,只是可能一些元素有它们的特殊属性,就可能不同罢了.   代码里用详细注释,我就不再重复啦,大家看代码就可以啦! ...

  4. D3.js系列——元素操作和简单画布操作

    一.元素操作: 1.选择元素 select 和 selectAll,以及选择集的概念 var p = d3.select("body").select("p") ...

  5. selenium中元素操作之浏览器窗口滚动&网页日期控件操作（js操作）（五）

    js的滚动条scrollIntoView() Arguments[] - python与js之间的羁绊 1.移动到元素element对象的“底端”,与当前窗口的“底部”对齐: driver.execu ...

  6. Java&Selenium调用JS实现高亮被操作页面元素高亮

    Java&Selenium调用JS实现高亮被操作页面元素高亮 /* * the method of invoking js to do something * * @author daviey ...

  7. 415 DOM 查找列表框、下拉菜单控件、对表格元素/表单控件进行增删改操作、创建元素并且复制节点与删除、 对表格操作、通用性和标准的事件监听方法（点击后弹窗效果以及去掉效果）

    DOM访问列表框.下拉菜单的常用属性: form.length.options.selectedindex.type       使用options[index]返回具体选项所对应的常用属性:defa ...

  8. html中表格元素的相关总结

    表格元素相关总结: 1.在CSS中,内部表元素(如td.tr.col等)生成矩形框,这些矩形框包含内容.内边距和边框,但没有外边距,因此如果定义外边距,浏览器将忽略该定义:对于table元素,外边距有 ...

  9. selenium元素操作

    1.文本框(text field or textarea) element.sendKeys("test");//在输入框中输入内容: element.clear(); //将输入 ...

  10. Gremlins.js – 模拟用户随机操作的 JS 测试库

    Gremlins.js 是基于 JavaScript 编写的 Monkey 测试库,支持 Node.js 平台和浏览器中使用.Gremlins.js 随机模拟用户操作:单击窗口中的任意位置,在表格中输 ...

随机推荐

  1. 一人一python挑战题解

    题目id: 1 just print a+b give you two var a and b, print the value of a+b, just do it!! print a+b 题目id ...

  2. TYVJ P1098 任务安排 Label:倒推dp 不懂

    描述 N个任务排成一个序列在一台机器上等待完成(顺序不得改变),这N个任务被分成若干批,每批包含相邻的若干任务.从时刻0开始,这些任务被分批加工,第i个任务单独完成所需的时间是Ti.在每批任务开始前, ...

  3. 【BZOJ】1270: [BeijingWc2008]雷涛的小猫（DP+水题）

    http://www.lydsy.com/JudgeOnline/problem.php?id=1270 这完全是一眼题啊,但是n^2的时间挺感人.(n^2一下的级别请大神们赐教,我还没学多少dp优化 ...

  4. COJ970 WZJ的数据结构（负三十）

    WZJ的数据结构(负三十) 难度级别:D: 运行时间限制:1000ms: 运行空间限制:262144KB: 代码长度限制:2000000B 试题描述 给你一棵N个点的无根树,点和边上均有权值.请你设计 ...

  5. 使 SortList 实现重复键排序

    SortList 默认对按Key来排序,且Key值不能重复,但有时可能需要用有重复值的Key来排序,以下是实现方式: 1.对强类型:以float为例 #region 使SortList能对重复键排序 ...

  6. win7 无法复制粘贴

     win7 无法复制粘贴解决办法 在开始-运行里输入以下命令 regsvr32 shdocvw.dll ,确定,接着出现一个消息框,确定 regsvr32 oleaut32.dll,确定,接着出现一个 ...

  7. hello world 驱动程序编写

    操作系统课程设计选题  驱动程序的编写和安装. 经过一天多的努力,终于把我的第一个驱动程序模块成功编写并实现插入内核和移除,在这里把过程记录下来方便以后查看,也给其他为之困扰的朋友一个建议. 环境: ...

  8. 【转】SQLServer内部原理

    原文地址:http://twb.iteye.com/blog/182083 在讲SQLSERVER内部原理的之前,我觉得非常有必要向大家介绍一下SQLSERVER的历史. 让我们站在1999年,看看计 ...

  9. eclipse怎么显示代码行数

    熟悉java开发的朋友们肯定有这样的经验,那就是在用eclipse进行java开发的时候,没有显示代码的行数,这并不利于我们进行程序的调试.今天,小编就来教大家eclipse怎么显示代码行数     ...

  10. HTML / JavaScript / PHP 实现页面跳转的几种方式

    ① HTML 的 meta refresh 标签 <!doctype html> <html lang="en"> <head> <met ...