直接上菜咯。。。

以下为 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. Nginx配置文件nginx.conf中文详解（总结）

     PS:这篇是目前最完整的Nginx配置参数中文说明.更详细的模块参数请参考:http://wiki.nginx.org/Main                 #定义Nginx运行的用户和用户组 ...

  2. spark-shell --conf

    spark-shell --conf -h Usage: ./bin/spark-shell [options] Options: --master MASTER_URL spark://host:p ...

  3. php pdo分页

    <table width="95%" border="1" cellspacing="0" cellpadding="0&q ...

  4. js获取时间(本周、本季度、本月..)

    /** * 获取本周.本季度.本月.上月的开端日期.停止日期 */ var now = new Date(); //当前日期 var nowDayOfWeek = now.getDay(); //今天 ...

  5. sql语句什么时候用双引号或者单引号

    INSERT INTO table_name ( field1, field2,...fieldN ) VALUES ( value1, value2,...valueN ); 如果数据是字符型,必须 ...

  6. sortedArrayUsingComparator

    /* 升序.降序 */ NSArray * array41 = @[@,@,@,@,@,@,@]; NSArray * array42 = [[NSArray alloc]init]; array42 ...

  7. PHP 下载导出中文名的文件的编码注意事项

    我的页面全部都为utf-8 在代码中我的文件名是中文名. 在创建文件时,就要将utf-8转码成gbk(用以支持中文) $file = iconv('utf-8',"gbk",$fi ...

  8. ecshop退款订单原理分析

    ecshop退款订单原理分析 时间:2013-04-12 23:41来源:www.chinab4c.com 作者:ecshop专家 点击:799 咨询qq:760868471咨询旺旺 ecshop退款 ...

  9. JNDI学习总结(一)——JNDI数据源的配置

    一.数据源的由来 在Java开发中,使用JDBC操作数据库的四个步骤如下:   ①加载数据库驱动程序(Class.forName("数据库驱动类");) ②连接数据库(Connec ...

  10. 一些需要被禁用的php危险函数

    phpinfo() 功能描述：输出 PHP 环境信息以及相关的模块、WEB 环境等信息。 危险等级：中 passthru() 功能描述：允许执行一个外部程序并回显输出，类似于 exec()。 危险等级 ...