6. JavaScript开发中表格与表单技术

作者: 辘轳鹿鹿 | 来源:发表于2020-08-10 10:03 被阅读0次

在网页中，表格和表单都是非常关键的应用，表格用来存放数据并布局页面样式，表单用于传输数据、采集客户端信息等。

6.1 用CSS定制表格样式

使用 CSS 来设置表格样式可以极大地改善表格外观，如可以用 CSS 来设置表格的颜色、边框等。

6.1.1 表格的相关标签

表格具有3 个最基本的HTML 标签，分别是<table> 标签、<tr> 标签和<td> 标签。
- <table> 标签用于定义整个表格
  - border属性：用于为每个单元格应用边框，并用边框围绕表格，如果border属性的值发生改变，那么只有表格周围边框的尺寸会发生改变，表格内部的边框尺寸不变。设置border="0"，可以显示没有边框的表格。
  - summary属性：用于设置表格内容的摘要，该属性不会对普通浏览器产生任何视觉变化，即在浏览页面时不可见，但该属性的内容对搜索引擎非常重要。
- <tr> 定义一行
- <td> 定义一个单元格
此外还有两个标签应用比较广泛，分别是<caption> 标签和 <th> 标签。<caption> 标签用来设置表格标题；<th> 标签用来设置表头，加粗并居中显示。

6.1.2 设置表格的颜色

表格颜色的设置十分简单，与文字颜色的设置完全一样，通过color 属性设置表格中文字的颜色，通过 background-color 属性设置表格的背景颜色，通过 bordercolor 属性设置表格的边框颜色等。

6.1.3 设置表格的边框

根据不同的需求，可以对表格或单元格应用不同的边框，使用CSS中的边框属性可以指定边框的大小、样式和颜色等。该属性包括 border-width、border-style、border-color。

border:2px solid red

border-width:2px;
border-style:solid; /*边框样式还包括：dashed,dotted,double,groove,ridge,inset,outset*/
border-color:red;

先设置border-style，再设置border-color

设置表格边框属性时，除了将表格作为一个整体进行定义，也可以将表格边框的4个部分分别进行定义，具体代码如下：

border-top:2px solid red;
border-bottom:2px solid red;
border-right:2px solid red;
border-left:2px solid red;


<!DOCTYPE html>
<html>
<head>
<title>设置表格边框</title>
<style type="text/css">
table{ 
   color:#000066;                
   background-color:#999999;   
   font-family:"宋体";          
   border-collapse: separate;           /*表格边框分开不合并*/
   border-spacing: 5pt;                /*相邻单元格边框的间距*/
   border-top: 5px solid red;          /*表格的上边框*/
   border-left: 5px solid red;         /*表格的左边框*/
   border-right: 5px dashed black;     /*表格的右边框*/
   border-bottom: 5px dashed blue;     /*表格的下边框*/
}  
th{ 
   color:#000033;              
   background-color:#9900CC;      
   border: solid 5pt;                  /*表头边框*/
} 
caption{
   font-size:16px;           /* 表格标题字体大小 */    
   font-weight:bolder;       /* 表格标题字体粗细 */   
   } 
</style>
</head>
<body onload="insTable()">
<table width="200" border="1" summary="该表格显示了学生的语文数学成绩" id="score">
  <caption>
    成绩表
  </caption>
  <th>姓名</th>
  <th>语文</th>
  <th>数学</th>
  <tr>
    <td>张三</td>
    <td>88</td>
    <td>90</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>65</td>
    <td>82</td>
  </tr>
  <tr>
    <td>王五</td>
    <td>95</td>
    <td>78</td>
  </tr>
</table>
</body>
</html>

6.2 用DOM控制表格

DOM 的全称是Document Object Model，即文档对象模型，它是网站内容与JavaScript 互通的接口。在 DOM 中，所有的HTML 元素、属性和文本都被看成对象，DOM 提供了访问所有这些对象的方法和属性，并可以通过创建、添加、修改和删除页面上的任意元素来重新构建页面。

6.2.1 动态添加表格

1. appendChild() 方法

var trNode = document.createElement("tr");
var tdNode = document.createElement("td");
var textNode = document.createTextNode("新添加的行");
tdNode.appendChild(textNode);
trNode.appendChild(tdNode);
document.getElementById('score').appendChild(trNode);

上面的代码，用户先创建了一个tr节点、td节点和一个文本节点，然后将文本节点追加在td节点后，再将td节点追加在tr节点后，最后将tr节点追加在需要添加新行的表格后。

2. insertRow() 方法和 insertCell() 方法

insertRow() 方法用于在表格中的指定位置插入一个新行。返回一个 TableRow，表示新插入的行。index从0开始，新行将被插入 index 所在行之前。

tableObject.insertRow(index)

insertCell() 方法用于在 HTML 表的一行的指定位置插入一个空的 <td> 元素。返回一个 TableCell 对象，表示新创建并被插入的 <td> 元素。请注意，该方法只能插入 <td> 数据表元。若需要给行添加头表元，必须用 Document.createElement() 方法和 Node.insertBefore() 方法（或相关的方法）创建并插入一个 <th> 元素。

tablerowObject.insertCell(index)

<script type="text/javascript"; language="javascript">
function insTable()
{
   /*在ID为score的表的最后新添加一行*/
   var objRow=document.getElementById("score").insertRow(4);   
   /*创建一个数组用来存放单元格的内容*/    
   var content=new Array();                                        
   content[0]=document.createTextNode("赵六"); 
   content[1]=document.createTextNode("55");
   content[2]=document.createTextNode("67");
   /*为新添加的一行添加单元格并填充内容*/
   for(var i=0;i< content.length;i++)                               
   {
      var objCell=objRow.insertCell(i);
      objCell.appendChild(content[i]);
   }
}
</script>

6.2.2 修改单元格内容

innerHTML属性：用于设置或者获取从对象的起始位置到终止位置的全部内容，包括HTML标签。
innerText属性：用于设置或者获取从对象的起始位置到终止位置的文本，不包括HTML标签。
在 JavaScript 中，要想修改单元格的内容，可以通过设置该单元格的 ID 或者 Name 属性来获取对要修改单元格的引用句柄，从而修改单元格内容。

var oTable=document.getElementById("member");
oTable.rows[3].cells[4].innerHTML="丢失"; //表的第三行，第四列

6.2.3 动态删除表格

方法一：确定所要删除的行号，直接删除

objTable.deledeRow(2);

方法二：不确定所要删除行的索引号，先根据所要删除行的ID找到其索引号再删除

var objRow=document.getElementById("tr3");
var Index=objRow.rowIndex;
objTable.deleteRow(index);

方法三：给表格每一行添加一列超链接，使用户单击要删除的那一行的超链接就可以删除该行

<script language="javascript">
function myDelete(){
    var oTable = document.getElementById("member");

    //删除该行
    this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
}

//window.onload()方法用于在网页加载完毕后立刻执行的操作，即当 HTML 文档加载完毕后，立刻执行某个方法。
window.onload=function(){
    var oTable = document.getElementById("member");
    var oTd;
    //动态添加delete链接
    for(var i=1;i<oTable.rows.length;i++){
        oTd = oTable.rows[i].insertCell(5);
        oTd.innerHTML = "<a href='#'>delete</a>";
        oTd.firstChild.onclick = myDelete;  //添加删除事件
    }
}
</script>

方法四：自定义一个删除列的方法

<script language="javascript">
function deleteColumn(oTable,iNum){
    //自定义删除列函数，即每行删除相应单元格
        for(var i=0;i<oTable.rows.length;i++)
        oTable.rows[i].deleteCell(iNum);
}
function aa(){
    var oTable = document.getElementById("member");
    deleteColumn(oTable,3);
}
</script>

6.3 控制表单

表单是网页与用户交互的桥梁，可以收集用户的信息和反馈意见，常常用于实现用户注册、登录、投票等功能。

6.3.1 理解表单的相关标签与表单元素

表单由窗体和控件组成，一个表单一般应该包含用户填写信息的输入框、提交按钮等，这些输入框或按钮叫作控件。表单很像容器，它能够容纳各种各样的控件。
一个表单用<form></form> 标签来创建，即定义表单的开始和结束位置，在开始和结束标签之间的一切定义都属于表单的内容。<form> 标签具有很多属性。
- id：用于返回表单对象id。可以通过id属性的值对表单进行引用。
- name：用于返回表单对象的名称。可以通过name属性的值对表单进行引用。
- method：用于说明表单的提交方法。可取值get()或post()，其中get()为默认方法。
- action：用来定义表达处理程序的位置（相对地址或绝对地址）
- target：用于说明在何处打开表单。默认值为_self，表示在原页面打开； _blank表示在新窗口打开；_top表示在顶级窗口打开；frameName表示在指定窗口打开。
- 表单中可以产生的动作只有两种：
  - submit()：提交表单
  - reset()：重置表单
表单里包含了几个常用表单元素，包括文本框（包括单行文本框text和密码passwd）、单选按钮radio、下拉列表框select、复选框checkbox以及按钮button（包括提交按钮submit和重置按钮reset）


<!DOCTYPE html>
<html>
<head>
<title>表单相关标记与表单元素</title>
</head>
<body>
<form method="post" name="myForm1" >
<p><label for="name">请输入您的姓名:</label><br><input type="text" name="name" id="name"></p>
<p><label for="passwd">请输入您的密码:</label><br><input type="password" name="passwd" id="passwd"></p>
<p><label for="color">请选择你最喜欢的颜色:</label><br>
<select name="color" id="color">
    <option value="red">红</option>
    <option value="green">绿</option>
    <option value="blue">蓝</option>
    <option value="yellow">黄</option>
    <option value="cyan">青</option>
    <option value="purple">紫</option>
</select></p>
<p>请选择你的性别:<br>
    <input type="radio" name="sex" id="male" value="male"><label for="male">男</label><br>
    <input type="radio" name="sex" id="female" value="female"><label for="female">女</label></p>
<p>你喜欢做些什么:<br>
    <input type="checkbox" name="hobby" id="book" value="book"><label for="book">看书</label>
    <input type="checkbox" name="hobby" id="net" value="net"><label for="net">上网</label>
    <input type="checkbox" name="hobby" id="sleep" value="sleep"><label for="sleep">睡觉</label></p>
<p><label for="comments">我要留言:</label><br><textarea name="comments" id="comments" cols="30" rows="4"></textarea></p>
<p><input type="submit" name="btnSubmit" id="btnSubmit" value="提交">
<input type="reset" name="btnReset" id="btnReset" value="重置"></p>
</form>
</body>
</html>

<label for="name">用户会觉得更加友好，在用户点击“请输入您的姓名:”时，光标会自动移动到指定ID的控件上。for属性的值只能是<label>标签要关联的表单元素的id值。

6.3.2 用CSS控制表单样式

使用CSS可以定义表单元素的外观。下面主要从改变表单元素的字体样式、边框样式和背景颜色出发，讨论怎样将 CSS 应用到表单中，从而达到美化表单的作用。

<style>
<!--
/* 直接控制各个标记 */
form {
    border: 1px dotted #AAAAAA;
    padding: 3px 6px 3px 6px;
        background:#3399FF;
    margin:0px;
    font:14px Arial;
}
input {
    color: #00008B;
    background-color: #ADD8E6;
    border: 1px solid #00008B;
}
select {
    width: 80px;
    color: #00008B;
    background-color: #ADD8E6;
    border: 1px solid #00008B;
}
textarea {
    width: 200px;
    height: 40px;
    color: #00008B;
    background-color: #ADD8E6;
    border: 1px solid #00008B;
}
-->
</style>

6.3.3 访问表单中的元素

采用DOM 树中的定位元素的方法document.getElementById()，可以访问表单中的元素，如下代码可以获取用户在id 为 age 的下拉列表中的选择

var =user_age=document.getElementById("age")

还可以用document 的 forms 集合，并通过表单在forms 集合中的位置或者表单的 name 来进行引用。

var objForm=document.forms["form1"];
var userName=objForm.elements["user"];

或直接访问这个元素

var userName=document.form1.user;

6.3.4 公共属性与方法

表单元素具有一些共同属性和方法，常用的属性如下。
- id：规定了元素的唯一 ID 值。
- name：规定了元素的名字。
- type：规定了元素的类型。
- value：定义了元素的值，除下拉菜单外所有元素都具有该属性。
- checked：声明了一个单选按钮或者复选框是否被选中，选中状态该属性值为 true。
如下HTML代码为两个单选按钮，为了实现两者只能选其一的效果，只有设置它们的name属性值相同。

<input type="radio" name="sex" id="male" value="male"><label for="male">男</label><br>
<input type="radio" name="sex" id="female" value="female"><label for="female">女</label></p>

如下JavaScript代码，调用了表单中的单选按钮objRadio的checked和value属性，从而获取了用户选中按钮的值

var objRadio = document.form1.sex;
/*遍历表单中name值为sex的元素*/
for(var i = 0;i< objRadio.length;i++){
  if(objRadio[i].checked){
    user_sex=objRadio[i].value;
  }
}

常用的一些方法
- blur：将焦点从该表单元素上移开，其作用与focus()方法相反
- focus：将焦点移动到该表单元素上
- click：相当于鼠标在表单元素上单击
- select：选中表单元素中可编辑的文本，如文本框

/*实现在浏览器中打开页面后，光标自动聚焦在form1中name为user的元素上*/
document.form1.user.focus();

6.3.5 提交表单

方法一：使用“提交”按钮或“图像”按钮。

<input type="submit" name="btnSubmit" value="提交" />

<input type="image" name="imgSubmit" src="imgSubmit.jpg" />

方法二：调用 JavaScript 的方法 submit()。

/*通过单击按钮提交表单，可以实现单击不同按钮提交表单到不同页面*/
<input type="button" value="提交到a页面" onclick="JavaScript:this.form.action='a.asp';this.form.submit()">

/*填写完表单直接提交，而不使用链接或按钮*/
objForm=document.getElementById("form1");
objForm.submit();

上述两种方法的区别是：单击“提交”按钮会触发 onsubmit 事件，而 submit() 方法不会触发该事件，因此在使用第二种方法提交表单时，需要在调用该方法之前完成表单的所有验证。