直接上菜咯。。。

以下为 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. Codeforces Round #190 DIV.2 A. Ciel and Dancing

    #include <cstdio> #include <iostream> #include <vector> using namespace std; int m ...

  2. [Unity2D]精灵

    精灵是Unity2D里面对通过图片纹理实现的游戏对象,通常会是游戏里面的玩家,敌人之类的,在Unity里面创建一个精灵的操作非常简单,直接把图片资源拖放到Hierarachy视图就可以完成了精灵的创建 ...

  3. overload和override的区别(转)

    overload和override的区别 override(重写) 1.方法名.参数.返回值相同.2.子类方法不能缩小父类方法的访问权限.3.子类方法不能抛出比父类方法更多的异常(但子类方法可以不抛出 ...

  4. [iOS经典面试题]用变量a给出下面的定义

    用变量a给出下面的定义       a)一个整型数(An integer) b) 一个指向整型数的指针(A pointer to an integer)  c) 一个指向指针的的指针,它指向的指针是指 ...

  5. iOS中--NSArray调用方法详解 (李洪强)

    下面的例子以     NSArray *array = [NSArray arrayWithObjects:@"wendy",@"andy",@"to ...

  6. hdu 饭卡

    本题的思路是:首先如果m<5,直接输出:若m>5,则先拿出5元钱买最贵的东西,这样背包容量就变成了m-5,商品数量为n-1的0/1背包问题. 此题的状态转移方程为:dp[j]=max{dp ...

  7. 文件上传\">将在3秒钟后返回前页

    conn.php: <?php $id=mysql_connect('localhost','root','root'); mysql_select_db("db_database12 ...

  8. 微博java SDK介绍及使用说明

    转自:作者:新浪微博 开放平台 @MUNTO_AKIRA http://open.weibo.com/blog/%E5%BE%AE%E5%8D%9Ajava-sdk%E4%BB%8B%E7%BB%8D ...

  9. 【液晶模块系列基础视频】5.4.X-GUI字体驱动4

    ============================= 技术论坛:http://www.eeschool.org 博客地址:http://xiaomagee.cnblogs.com 官方网店:ht ...

  10. 使用Android Studio和Genymotion模拟器搭建Andriod开发环境

    一.Android Studio下载 1.打开http://www.android.com/ 2.依照下图步骤打开下载页面 a.在页脚部分点击“App Developer Resources” b.点 ...