直接上菜咯。。。

以下为 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. 转：深入理解JavaScript闭包概念

    闭包向来给包括JavaScript程序员在内的程序员以神秘,高深的感觉,事实上,闭包的概念在函数式编程语言中算不上是难以理解的知识.如果对作用域,函数为独立的对象这样的基本概念理解较好的话,理解闭包的 ...

  2. RSA密钥的生成与配置

    openssl下载地址http://dldx.csdn.net/fd.php?i=20313208579480&s=ac2e809e168f7d5b8bf1515d3d6b1aa4,或者官方下 ...

  3. tomcat配置虚拟目录映射

    本文主要介绍web虚拟目录映射的两种常用方法及配置默认web应用的方法 一.在Server.xml中进行配置 在<Host>元素中添加子元素<Context path=" ...

  4. CSS实现样式布局

    使用CSS建站时,您肯定遇到过形形色色的布局问题,最后可能被搞得焦头烂额.本文的目的是让您的设计过程更为容易,当您遇到困难时为您提供快速参考. 1.有疑问,先验证 在调试时,先对您的代码进行验证往往能 ...

  5. Webscan360的防御与绕过

    这两天给360做了一个webscan360的总结,结果补丁还没有出来,就被人公布到了91org上面,既然公开了,那我就做一个总结 首先我们贴上它最新的防御正则 \<.+javascript:wi ...

  6. Union大小

    在一个union类型结构中,所有的成员公用同样的存储空间,其占用的大小为其成员中需要空间最大者: union本身只保留一块地址空间,因为只有一个成员真正存储于该地址, 但这块地址也要满足内存对齐原则. ...

  7. 红，X-Japan

    ktv如果唱这首应该很爽,慢慢学. 红(くれない) 歌手:X JAPAN作词:YOSHIKI作曲:YOSHIKI I could not look back you'd gone away from ...

  8. STATIC::含义

    Static 关键字,是作为作用域引用,类似Parent和self 关键字,和Parent和 Self不同 Parent引用父类作用域 Self 引用当前类作用域 Static 引用全部静态作用于,子 ...

  9. NOJ 1651 Red packet（二分）

    [1651] Red packet 时间限制: 1000 ms 内存限制: 65535 K 问题描述 New Year is coming! Our big boss Wine93 will dist ...

  10. Asp.Net：GridView 编辑、删除、自定义分页以后备用

    页面 GridView 绑定:在中,有 <asp:BoundField/>和 <asp:TemplateField><ItemTemplate>嵌套服务器控件 &l ...