直接上菜咯。。。

以下为 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. ios clang: error: linker command failed with exit code 1 (use -v to see invocation)解决方法

    当xcode编译时出现这个错误,一般是你的编译源码中存在重复的源码 解决方法:"Build Phases" -> "Compile Sources" 去删 ...

  2. Windows环境下Redis

    Redis 是一个高性能的key-value数据库, 使用内存作为主存储,数据访问速度非常快,当然它也提供了两种机制支持数据持久化存储.比较遗憾的是,Redis项目不直接支持Windows,Windo ...

  3. 带你学C，带你飞——入门

  4. QInputDialog 使用方法

    在Qt中,如果想快速生成一个对话框,可以和用户进行简单的交互,而不需要写一个新的类的时候,就要用到QInputDialog类,这个类就是专门用来建立简单对话框的,其主要能建下列几种对话框:

  5. 在thinkphp框架模板中引用session

    我已经将模板引擎配置为smarty,在模板中使用常量是写为 {$smarty.const.ADMIN_IMG} 到使用到session的值时这样写 {$smarty.session.mg_name}

  6. php函数描述及例子

    /** * xml2array() will convert the given XML text to an array in the XML structure. * Link: http://w ...

  7. Java静态块学习

    静态块是类里面的构造器,对象有构造器那么类也有构造器,类里面的构造器叫做初始化方法.也就是new一个对象他会经过一个构造器.加载一个类,也有被初始化的一片代码,这个就称之为静态块.一个类里面可以有很多 ...

  8. Redis 笔记与总结3 list 类型

    redis 版本 [root@localhost ~]# redis-server --version Redis server v= sha=: malloc=jemalloc- bits= bui ...

  9. SVN 树冲突的解决方法（Ubuntu 环境）

    今天在 服务器上(Ubuntu) svn up 更新的时候,出现了 SVN 树冲突 root@futongdai:~# cd /home/wwwroot/newcrm.ofim.com/ root@f ...

  10. javaWeb中servlet开发(2)——servlet与表单

    1.重写doGet方法 public class InputServlet extends HttpServlet{ public void doGet(HttpServletRequest req, ...