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

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

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() 方法不会触发该事件，因此在使用第二种方法提交表单时，需要在调用该方法之前完成表单的所有验证。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,214评论 6赞 481
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,307评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 152,543评论 0赞 341
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,221评论 1赞 279
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,224评论 5赞 371
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,007评论 1赞 284
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,313评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,956评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,441评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,925评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,018评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,685评论 4赞 322
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,234评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,240评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,464评论 1赞 261
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,467评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,762评论 2赞 345