首页 > 编程笔记 > JavaScript笔记

JS table表格操作

表格由于其具有二维结构，所以特别适合用于组织结构化数据，其主要由 table 表格、行和单元格等元素组成。整个表格又可以按数据分为：表格头部、表格主体和表格尾部 3 个区域。在 DOM 中，这些表格的组成部分以及组成区域都被看作元素节点，因而操作它们可以使用 HTML DOM 的元素节点方法和属性。此外，还可以使用表格节点所提供的一些属性，以简化表格节点的操作。

表 1 列出了表格相关节点的常用属性。

表 1：表格相关节点的常用属性
属性 描述
tHead 获取表格头部，使用 table 节点来引用
tBodies 获取表格的所有主体（表格主体集合），使用下标引用各个主体，如第一个主体：tBodies[0],使用 table 节点来引用
tFoot 获取表格尾部，使用 table 节点来引用
rows 获取表格中的所有行（行集合），可使用 table、tBodies[n]、tHead 和 tFoot 节点来引用
cells 获取表格某一行中的所有单元格（集合），由指定行节点来引用

下面通过例 1 和例 2 来演示表格各个属性的用法。

【例 1】使用表格节点属性操作表格。 
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>使用表格节点属性操作表格</title>
  6. <script>
  7.    window.onload = function(){
  8.        oTable = document.getElementById('tbl');
  9.        oTable.tHead.style.borderColor = 'red';//操作表格头部
  10.        oTable.rows[1].style.background = 'greenyellow';//操作表格的第二行
  11.        oTable.tBodies[0].style.background = 'blue';//操作表格中的第一个主体
  12.        oTable.tBodies[0].rows[1].style.background = 'brown';//操作表格第一个主体中的第二行
  13.        //操作表格第一个主体中的第二行中的第一个单元格
  14.        oTable.tBodies[0].rows[1].cells[0].style.background = 'pink';     
  15.        oTable.tFoot.style.background = 'gray';//操作表格尾部
  16.    };
  17. </script>
  18. </head>
  19. <body>
  20.   <table border="1" id="tbl" width="500">
  21.     <thead>
  22.       <tr>
  23.         <th>表头一</th>
  24.         <th>表头二</th>
  25.         <th>表头三</th>
  26.       </tr>
  27.     </thead>
  28.     <tbody>
  29.       <tr>
  30.         <td>内容一</td>
  31.         <td>内容二</td>
  32.         <td>内容三</td>
  33.       </tr>
  34.       <tr>
  35.         <td>内容一</td>
  36.         <td>内容二</td>
  37.         <td>内容三</td>
  38.       </tr>
  39.     <tbody>
  40.     <tfoot>
  41.       <tr>
  42.         <td>统计一</td>
  43.         <td>统计一</td>
  44.         <td>统计一</td>
  45.       </tr>
  46.     </tfoot>
  47.   </table>
  48. </body>
  49. </html>
例 1 中的 JS 代码分别使用相应的表格属性获取了表格头部、主体、尾部、行以及单元格等节点，进而对它们设置行内样式。上述代码在 Chrome 浏览器中的运行结果如图 1 所示。
使用表格节点属性操作表格结果
图 1：使用表格节点属性操作表格结果

【例 2】获取表单数据动态生成表格。 
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>动态生成表格</title>
  6. <style>
  7.    #tbl{border-collapse:collapse;margin-top:5px;width:500px;}
  8.    table,th,td{border:1px solid #000;}
  9.    th,td{text-align:center;}
  10. </style>
  11. <script>
  12.    window.onload = function(){
  13.      var gender;
  14.      var fr = document.form1;
  15.      var username = fr.username;
  16.      var age = fr.age;
  17.      var oBtn = document.getElementById('btn');
  18.      var tbl = document.getElementById('tbl');
  19.      var tBody = tbl.tBodies[0];
  20.      //单击按钮后为表格新增一行数据
  21.      oBtn.onclick = function(){
  22.          //创建tr和td元素
  23.          var tr = document.createElement('tr');
  24.          var tID = document.createElement('td');
  25.          tID.setAttribute('class','id');//为ID单元格增加class属性
  26.          var tUsername = document.createElement('td');
  27.          var tGender = document.createElement('td');
  28.          var tAge = document.createElement('td');
  29.          //校验输入数据的有效性
  30.          if(!username.value || !age.value){
  31.               alert('请输入完整内容');
  32.               return;
  33.          }
  34.          if(isNaN(age.value) || age.value<0){
  35.               alert('请输入正确年龄');
  36.               return;
  37.          }
  38.          //判断是否选择了性别，以及获取所选择的值
  39.          if(fr.gender[0].checked == true){
  40.               gender = "女";
  41.               fr.gender[0].checked = false;
  42.          }else if(fr.gender[1].checked == true){
  43.               gender = "男";
  44.               fr.gender[1].checked = false;
  45.          }
  46.          if(gender == null){
  47.               alert('请选择性别');
  48.               return;
  49.          }
  50.          //为各个单元格添加表单提交的数据
  51.          tUsername.innerHTML = username.value;
  52.          tGender.innerHTML = gender;
  53.          tAge.innerHTML = age.value;
  54.          //添加删除超链接
  55.          var tDel = document.createElement('td');
  56.          tDel.innerHTML = '<a href="javascript:;">删除</a>';
  57.          //执行删除表格行操作
  58.          var oA = tDel.children[0];
  59.          oA.onclick = function(){
  60.              if(confirm("确定删除吗？")){
  61.                tBody.removeChild(this.parentNode.parentNode);
  62.                setId();//重新排序
  63.              }
  64.          };
  65.          //为表格添加单元格和行
  66.          tr.appendChild(tID);
  67.          tr.appendChild(tUsername);
  68.          tr.appendChild(tGender);
  69.          tr.appendChild(tAge);
  70.          tr.appendChild(tDel);
  71.          tBody.appendChild(tr);
  72.          //设置行序号
  73.          setId();
  74.          username.value = age.value='';
  75.      };
  76.      //定义行序号
  77.      function setId () {
  78.        var tId = tBody.querySelectorAll('.id');
  79.        for (var i = 0; i < tId.length; i++) {
  80.             tId[i].innerHTML = i+1;
  81.        }
  82.      }
  83. };
  84. </script>
  85. </head>
  86. <body>
  87.   <form name="form1">
  88.     姓名：<input type="text" name="username" id="username"/><br/>
  89.     性别：<input type="radio" name="gender"/>女
  90.     <input type="radio" name="gender"/>男<br/>
  91.     年龄：<input type="text" name="age" id="age"/><br/>
  92.     <input type="button" id='btn' value="添加"/>
  93.   </form>
  94.   <table id='tbl'>
  95.     <thead>
  96.       <tr>
  97.         <th>序号</th>
  98.         <th>姓名</th>
  99.         <th>性别</th>
  100.         <th>年龄</th>
  101.         <th>删除</th>
  102.       </tr>
  103.     </thead>
  104.     <tbody>
  105.     </tbody>
  106.   </table>
  107. </body>
  108. </html>
例 2 将表单输入的数据添加到表格中，每提交一次表单将新增一行数据。在提交表单时会校验数据的有效性：各项数据不能为空，并且年龄必须为大于 0 的数字。对表格中的数据还可以动态执行删除操作，删除前需要进行确认。

该示例综合应用了前面所介绍的多个知识点，其中除了使用表格节点属性获取相关表格节点外，还使用了表单相关节点的属性来获取表单及表单元素节点，使用 document 节点获取和创建元素节点，以及使用元素节点的属性操作来设置属性和元素内容等知识点。

上述代码在 Chrome 浏览器中的运行结果如图 2～图 5 所示。
运行最初效果
图 2：运行最初效果
添加4条数据后的效果
图 3：添加 4 条数据后的效果

确认删除
图 4：确认删除

删除第4行数据后的效果
图 5：删除第 4 行数据后的效果

所有教程

优秀文章