直接上菜咯。。。

以下为 HTML 表格源码：

  1.  <html>
  2.      <head>
  3.          <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  4.  
  5.          <title>JS-006-表格元素操作</title>
  6.          <script type="text/javascript" src="common.js"></script>
  7.          <script type="text/javascript" src="test.js"></script>
  8.  
  9.          <link rel="stylesheet" type="text/css" href="global.css">
  10.      </head>
  11.  
  12.      <body>
  13.          <div>
  14.              <h4>表格操作</h4>
  15.  
  16.              <ul>
  17.                  <li>获取表格的行数：document.getElementById("study").children[0].rows.length</li>
  18.                  <li>获取表格的列数：document.getElementById("study").children[0].rows[row].cells.length</li>
  19.                  <li>获取单元格的值：cell.innerHTML</li>
  20.                  <li>备注：当表格中存在单元格合并的情况下，表格的行列数会相对应减少，顺序：从上到下，从左到右</li>
  21.                  <li>&nbsp;&nbsp;&nbsp;行内合并：被合并的列对应的原值将不存在</li>
  22.                  <li>&nbsp;&nbsp;&nbsp;列内合并：被合并的行对应的原值将不存在</li>
  23.              </ul>
  24.  
  25.              <table id="study" width="400" border="1">
  26.                  <tr>
  27.                      <th></th>
  28.                      <th>周一</th>
  29.                      <th>周二</th>
  30.                      <th>周三</th>
  31.                      <th>周四</th>
  32.                      <th>周五</th>
  33.                      <th>周六</th>
  34.                      <th>周日</th>
  35.                  </tr>
  36.                  <tr>
  37.                      <th>第一节</th>
  38.                      <td>政治<span sytle="color:red">test</span></td>
  39.                      <td>物理</td>
  40.                      <td>化学</td>
  41.                      <td>数学</td>
  42.                      <td>体育</td>
  43.                      <td>游泳</td>
  44.                      <td>钢琴</td>
  45.                  </tr>
  46.                  <tr>
  47.                      <th>第二节</th>
  48.                      <td>外语</td>
  49.                      <td>艺术</td>
  50.                      <td>高数</td>
  51.                      <td>线代</td>
  52.                      <td>马哲</td>
  53.                      <td rowspan="3">拓展</td>
  54.                      <td>爬山</td>
  55.                  </tr>
  56.                  <tr>
  57.                      <th>第三节</th>
  58.                      <td>厚黑</td>
  59.                      <td>财会</td>
  60.                      <td>音乐</td>
  61.                      <td>美术</td>
  62.                      <td>武术</td>
  63.  
  64.                      <td>攀岩</td>
  65.                  </tr>
  66.                  <tr>
  67.                      <th>第四节</th>
  68.                      <td>长安</td>
  69.                      <td>宝马</td>
  70.                      <td>法拉利</td>
  71.                      <td>劳斯莱斯</td>
  72.                      <td>悍马</td>
  73.  
  74.                      <td>蹦极</td>
  75.                  </tr>
  76.                  <tr>
  77.                      <th>第五节</th>
  78.                      <td>百达翡丽</td>
  79.                      <td>江诗丹顿</td>
  80.                      <td>宝玑</td>
  81.                      <td>浪琴</td>
  82.                      <td>伯爵</td>
  83.                      <td colspan="2">CS75</td>
  84.  
  85.                  </tr>
  86.                  <tr>
  87.                      <th>第六节</th>
  88.                      <td>selenium</td>
  89.                      <td>python</td>
  90.                      <td>java</td>
  91.                      <td>TestNG</td>
  92.                      <td>maven</td>
  93.                      <td>jekins</td>
  94.                      <td>fitness</td>
  95.                  </tr>
  96.                  <tr>
  97.                      <th>第七节</th>
  98.                      <td>HTML</td>
  99.                      <td>PHP</td>
  100.                      <td>JavaScript</td>
  101.                      <td></td>
  102.                      <td>XML</td>
  103.                      <td></td>
  104.                      <td></td>
  105.                  </tr>
  106.                  <tr>
  107.                      <th>第八节</th>
  108.                      <td>Excel</td>
  109.                      <td></td>
  110.                      <td>CSV</td>
  111.                      <td>properties</td>
  112.                      <td>md</td>
  113.                      <td></td>
  114.                      <td></td>
  115.                  </tr>
  116.              </table>
  117.  
  118.              <input class="table" id="row" type="text"><input class="table" id="col" type="text">
  119.              <input id="get_table_text" type="button" value="取值" onclick="get_table_text();"><input id="t_text" type="text">
  120.              <input id="get_table_text" type="button" value="改变单元格样式" onclick="change_table_css();">
  121.          </div>
  122.  
  123.          <div>
  124.              <br><br><br><br>
  125.              <a href="http://www.w3school.com.cn/jsref/dom_obj_style.asp" target="_blank">HTML DOM Style 对象</a>
  126.          </div>
  127.      </body>
  128.  </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. WebRTC手记之本地视频采集

    转载请注明出处:http://www.cnblogs.com/fangkm/p/4374610.html 前面两篇文章介绍WebRTC的运行流程和使用框架接口,接下来就开始分析本地音视频的采集流程.由 ...

  2. Function Scope

    JavaScript’s function scope means that all variables declared within a function are visi-ble through ...

  3. [文字雲產生器] Tagxedo 把文字串成雲、變成畫，印在 T-Shirt、馬克杯、詩袋….

    http://www.tagxedo.com/app.html 有種東西叫「Word Clouds」,就是把一堆文字依照不同的大小.顏色.角度與位置拼湊在一起,讓他變成像一朵雲一般.組合成各種不同的形 ...

  4. JavaScript - 时间函数

    时间美化函数 /* 1.< 60s, 显示为“刚刚” 2.>= 1min && < 60 min, 显示与当前时间差“XX分钟前” 3.>= 60min &am ...

  5. java密码验证正则表达式校验

    ,正则表达式就是记录文本规则的代码.php密码验证正则表达式(8位长度限制)<?php //密码验证 $password = "zongzi_Abc_oo13a2"; $n ...

  6. windows batch语法

    windows BATCH基本知识扩展名是bat(在nt/2000/xp/2003下也可以是cmd)的文件就是批处理文件. ==== 注 =============================== ...

  7. obout editor Absolute path for uploaded image

    本文转自:https://www.obout.com/editor_new/KnowledgeBase.aspx?id=706   Absolute path for uploaded image Q ...

  8. ORACLE SEQUENCE用法

    引用自: http://www.cnblogs.com/hyzhou/archive/2012/04/12/2444158.html 在oracle中sequence就是序号,每次取的时候它会自动增加 ...

  9. metasploit-post模块信息

    Name                                             Disclosure Date  Rank    Description ----           ...

  10. poj 3253 初涉二叉堆 模板题

    这道题很久以前就做过了 当时是百度学习了优先队列 后来发现其实还有个用sort的办法 就是默认sort排序后 a[i]+=a[i-1] 然后sort(a+i,a+i+n) (大概可以这样...答案忘了 ...