JavaScript 动态网页实例 —— 表格处理

于 2024-05-24 08:56:19 发布
阅读量1.1k 收藏 10
点赞数 38
分类专栏： 前端 JavaScript 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cccloveforever/article/details/138597557
版权
这篇博客详细介绍了如何使用JavaScript动态操作HTML表格，包括设置表格属性、增删行列及修改表元内容。首先讲解了HTML表格的基本结构和属性，接着展示了如何利用JavaScript设置表格的样式和属性。然后，通过实例演示了如何动态添加和删除表格行，以及对表元进行内容修改。最后，讨论了操作表元的方法，如insertCell和deleteCell。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

        表格是网页设计中必不可少的内容之一。本章首先介绍HTML中普通表格的组成结构，然后，在此基础上，介绍如何使用JavaScript设置表格的属性。随后，更具体地介绍操作表格元素的一般方法，主要是对表格行、列的动态增删操作。有了这些基础，在本章的最后介绍对表元的操作，即如何动态修改表格单元格中的内容。

HTML中的表格

        本节给出一段HTML中的表格的示例代码，几乎用到了HTML表格的各种常见属性本节代码并不涉及JavaScript代码，但对于后面几节的深入介绍是有帮助的。

要点

本节代码主要使用了HTML中的表格的相关属性，主要功能和用法如下。

  • 在 HTML 中，表格是用<table>标签定义的。表格被划分为行(使用<tr>标签)，每行又被划分为数据单元格(使用<td>标签)。td 表示“表格数据”(TableData)，即数据单元格的内容。数据单元格可以包含文本，图像，列表，段落，表单，水平线，表格等。
  • 如果不指定 border 属性，表格将不显示边框。但多数情况下需要显示边框。想要显示一个有边框的表格，需要使用 border 属性。例如，前面的代码中使用<table border-"1">定义表格的边框为1。
  • 在显示表格时，有时需要显示表格头，表格头使用<th>标签指定。
  • 在表格中可以使用 cellpadding 属性,用于定义表格内容和边框之间的留空，也可以使用 cellspacing 属性增加单元格间距。
  • 可以使用 align 属性设置单元格的对齐方式，让表格更美观一些。还可以使用 fiame 属性定义表格边框的显示方式。
  • 为了使表格显示更美观，可以为表格添加背景色或背景图，分别使用bgcolor 和background属性实现。另外，还可以分别为某个单元格添加背景色或背景图。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML 表格</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
</head>
<body bgcolor="#ffc0c0">
<center><h2>HTML 表格</h2></center><hr>
<!--表格开始-->
<table border="1" frame="box" rules="groups" id="testTable" bordercolor="green" cellspacing="5" cellpadding="5">
<!--标题-->
<caption>总表头：测试用表</caption>
<thead><!--表头-->
<tr>
<th>表体一表头一</th>
<th>表体一表头二</th>
<th>表体一表头三</th>
</tr>
</thead>
<!-- 这里是脚注，本例中放在了表体之前-->
<tfoot bgcolor="orange">
<tr>
<th colspan="3">这是一个HTML4格式的表格！</th>
</tr>
</tfoot>
<tbody bgcolor="yellow"> <!--表体之一-->
<tr>
<!--表体一的头部-->
<th colspan="3" align="center">表体一的头部信息</th>
</tr>
<tr>
<td>表元111</td>
<td>表元112</td>
<td>表元113</td>
</tr>
<tr>
<td>表元121</td>
<td>表元122</td>
<td>表元123</td>
</tr>
<tr>
<td>表元131</td>
<td>表元132</td>
<td>表元133</td>
</tr>
</tbody>
<tbody bgcolor="green"><!--表体之二-->
<tr>
<!--表体二的头部-->
<th colspan="3" align="center">表体二的头部信息</th>
</tr>
<tr>
<td>表元211</td>
<td>表元212</td>
<td>表元213</td>
</tr>
<tr>
<td>表元221</td>
<td>表元222</td>
<td>表元223</td>
</tr>
</tbody>
</table>
</body>
</html>

分析

  • (1)程序首先使用<table></table>定义了一个表格，并为其设置了border、fiame、rules、id、bordercolor、cellspacing 和 cellpadding 等属性。
  • (2)表格的主体部分，共包含5部分内容。第1部分为<caption>，表示表格的总标题;第2部分为<thead>，表示表格的表题;第3部分为<tf0ot>，表示表格的脚注;第4部分和第5 部分为<tbody>，表示表格的主体内容。
  • (3)<thead>部分为1行3列;<tfoot>部分为1行1列，背景色为orange;第1个<tbody>部分有4行,其中第1行只有1列,其他行都是3列,<tbody>的背景色为yellow;第2个<tbody>部分有3行，其中第1行只有1列，其他行都是3列，<tbody>的背景色为green。

设置表格属性

本节给出一段设置表格属性的示例代码，可以实现对表格对齐方式、背景色、边框粗细边框显隐、内外边距等属性的动态设置。

要求

本节代码主要使用了JavaScript中设置表格属性的相关属性与方法，其主要功能和用法如下。

  • 在 DOM 中,有专门用于处理表格及其元素的属性和方法，其名称与 HTML表格中的元素和属性名称相似。HTML4中的<table>有着与 DOM 中很相似的属性名，这些属性包括:align、bgColor、border、cellPadding、cellSpacing与width。
  • HTMLTableElement 对象也包含对其附加元素的缩写形式，例如，tableElement.caption对应<caption>标签，tableElement.tHead 和tableElement.tFoot 分别对应<thead>和<tbody>标签。rows[]聚集和 tBodies[聚集则分别可以访问<tr>和<tbody>。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>设置表格属性</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
</head>
<body bgcolor="#ffc0c0">
<center><h3>设置表格属性</h3></center><hr>

<!--表格开始-->
<table border="1" frame="box" id="testTable" bordercolor="green" cellspacing="5" cellpadding="5">
<!--标题-->
<caption>总表头：测试用表</caption>
<thead><!--表头-->
<tr>
<th>表体一表头一</th>
<th>表体一表头二</th>
<th>表体一表头三</th>
</tr>
</thead>
<!-- 这里是脚注，本例中放在了表体之前-->
<tfoot>
<tr>
<th colspan="3">这是一个HTML4格式的表格！</th>
</tr>
</tfoot>
<tbody> <!--表体之一-->
<tr>
<th colspan="3" align="center">表体一的头部信息</th> <!--表体一的头部-->
</tr>
<tr>
<td>表元111</td>
<td>表元112</td>
<td>表元113</td>
</tr>
<tr>
<td>表元121</td>
<td>表元122</td>
<td>表元123</td>
</tr>
<tr>
<td>表元131</td>
<td>表元132</td>
<td>表元133</td>
</tr>
</tbody>
<tbody><!--表体之二-->
<tr>
<th colspan="3" align="center">表体二的头部信息</th><!--表体二的头部-->
</tr>
<tr>
<td>表元211</td>
<td>表元212</td>
<td>表元213</td>
</tr>
<tr>
<td>表元221</td>
<td>表元222</td>
<td>表元223</td>
</tr>
</tbody>
</table>
<br clear="all"><br clear="all">
<script type="text/javascript">
<!--
//通过id获取表格属性
var theTable = document.getElementById('testTable');
//-->
</script>
<!--以下是控制表单-->
<form action="#" method="get">
<strong>对齐：</strong> 
<!--通过onchange来设置表格在文档中的对齐方式-->
<select onchange="theTable.align = this.options[this.selectedIndex].text;">
<option>left</option>
<option>center</option>
<option>right</option>
</select>
<strong>背景色：</strong> 
<!--通过onchange来设置表格背景颜色-->
<select onchange="theTable.bgColor = this.options[this.selectedIndex].text;">
<option>white</option>
<option>red</option>
<option>blue</option>
<option>yellow</option>
<option>orange</option>
<option>green</option>
<option>black</option>
</select><br>
<strong>边框显示：</strong> 
<!--通过onchange来设置表格Frame样式-->
<select onchange="theTable.frame = this.options[this.selectedIndex].text;">
<option>above</option>
<option>below</option>
<option>border</option>
<option>box</option>
<option>hsides</option>
<option>vsides</option>
<option>lhs</option>
<option>rhs</option>
<option>void</option>
</select>
<strong>分组规则：</strong>
<!--通过onchange来设置表格rules方式-->
<select onchange="theTable.rules = this.options[this.selectedIndex].text;">
<option>all</option>
<option>cols</option>
<option>groups</option>
<option>none</option>
<option>rows</option>
</select>
<br><br>
<strong>边框：</strong>
<!--通过onchange来设置表格边框宽度-->
<input type="text" size="2" maxlength="2" value="1" 
onchange="theTable.border = this.value;">
<strong>外边距：</strong>
<!--通过onchange来设置表元填充方式-->
<input type="text" size="2" maxlength="2" value="1" 
onchange="theTable.cellPadding = this.value;">
<strong>内边距：</strong>
<!--通过onchange来设置表元留空方式-->
<input type="text" size="2" maxlength="2" value="1" 
onchange="theTable.cellSpacing = this.value;">
</form>
</body>
</html>

 

分析

  • (1)程序首先建立了一个表格，并将其命名为“testTable”。随后，使用“theTable=document.getElementById(testTable);”将表格的相关属性取出，并存储在变量theTable中。
  • (2)随后，建立了一个form 表单，包含4个下拉列表框和3个文本框，其 onchange 事件分别关联一定的 JavaScript 代码，通过获取用户选择或输入的不同值，对表格的 align、bgColor、fame、rules、border、cellPadding和 cellSpacing等属性进行重新设置。

操作表格元素

本节给出一段操作表格元素的示例代码，可以实现对表格元素的任意删除，还可以在表格中添加行。

要点

本节代码主要使用了操作表格元素的相关属性与方法，主要功能和用法如下。

  • 在DOM中，提供了一些操作表格元素的方法，主要分为删除表格元素和创建表格元素两大类。
  • 可以使用 createTHead()、createTFoot()、createCaption()与insertRow(index)等方法创建表格元素。其中，insertRow(index)中的 index是一个数字，表示该行的序号，从0开始计数。
  • 相应的,可以使用 deleteCaption( ),deleteTHead( )、deleteTFoot( )和 deleteRowIndex(index)等方法删除表格元素。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>操作表格元素</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
</head>
<body bgcolor="#ffc0c0">
<center><h3>操作表格元素</h3></center><hr>
<!--表格开始-->
<table border="1" frame="box" id="testTable" bordercolor="green" cellspacing="5" cellpadding="5">
<!--标题-->
<caption>总表头：测试用表</caption>
<thead><!--表头-->
<tr>
<th>表体一表头一</th>
<th>表体一表头二</th>
<th>表体一表头三</th>
</tr>
</thead>
<!-- 这里是脚注，本例中放在了表体之前-->
<tfoot>
<tr>
<th colspan="3">这是一个HTML4格式的表格！</th>
</tr>
</tfoot>
<tbody> <!--表体之一-->
<tr>
<th colspan="3" align="center">表体一的头部信息</th> <!--表体一的头部-->
</tr>
<tr>
<td>表元111</td>
<td>表元112</td>
<td>表元113</td>
</tr>
<tr>
<td>表元121</td>
<td>表元122</td>
<td>表元123</td>
</tr>
<tr>
<td>表元131</td>
<td>表元132</td>
<td>表元133</td>
</tr>
</tbody>
<tbody><!--表体之二-->
<tr>
<th colspan="3" align="center">表体二的头部信息</th><!--表体二的头部-->
</tr>
<tr>
<td>表元211</td>
<td>表元212</td>
<td>表元213</td>
</tr>
<tr>
<td>表元221</td>
<td>表元222</td>
<td>表元223</td>
</tr>
</tbody>
</table>
<br clear="all"><hr><br clear="all">
<script type="text/javascript">
<!--
//通过id获取表格属性
var theTable = document.getElementById('testTable');
//-->
</script>
<!--控制表单-->
<form name="testForm" id="testForm">
<!--文本框，用来输入要删除的行的序号-->
<input type="text" name="rowtodelete" id="rowtodelete" size="2" 
maxlength="2" value="1">
<!--通过onclick调用theTable.deleteRow ()来删除行-->
<!--其中theTable.rows.length> 0表示存在行-->
<input type="button" value="删除行" 
onclick="if (theTable.rows.length> 0) 
theTable.deleteRow (document.testForm.rowtodelete.value);">
<!--文本框，用来输入要在其后插入的行的序号-->
<input type="text" name="rowtoinsert" id="rowtoinsert" size="2" 
maxlength="2" value="1">
<!--通过onclick调用theTable.insertRow()来插入行-->
<input type="button" value="插入行" 
onclick="theTable.insertRow(document.testForm.rowtoinsert.value);"><p>
<!--通过onclick调用theTable.deleteTHead()来删除表头-->
<input type="button" value="删除表头" onclick="theTable.deleteTHead();">
<!--通过onclick调用theTable.deleteTFoot()来删除脚注-->
<input type="button" value="删除脚注" onclick="theTable.deleteTFoot();">
<!--通过onclick调用theTable.deleteCaption()来删除标题-->
<input type="button" value="删除总表头" onclick="theTable.deleteCaption();">
</form>
</body>
</html>

分析

  • (1)程序首先建立了一个表格，并将其命名为“testTable”。随后，使用“theTable=document.getElementById(testTable);”将表格的相关属性取出，并存储在变量 theTable 中。
  • (2)随后，建立了一个名为“testForm”的form表单，包含2个文本框和一些按钮。其中，文本框用于输入要删除或添加的行数，按钮完成相应的删除或插入操作。
  • (3)按钮“删除表头”、“删除脚注”和“删除总表头”的onclick事件分别关联theTable.deleteTHead( )、theTable.deleteTFoot( )、theTable.deleteCaption( )，分别完成相应的删除操作。
  • (4)按钮“删除行”和“插入行”中，分别使用“document.testForm.rowtodelete.value”和“document.testForm.rowtoinsert,value”获取用户输入的值，后将这些值作为参数，调用'theTable.deleteRow()”和“theTable.insertRow()”来完成删除和插入操作。

操作表元素

        本节给出一段操作表元的示例代码，除完成对表格行、列的删除和插入操作外，还可以向表格的单元格中添加相应的内容。

要点
本节代码除使用了操作表格元素的相关方法外，主要使用了表元操作的方法，主要功能和用法如下。

  • 在DOM中，提供了一些操作表格元素的方法，主要分为删除表格元素和创建表格元素两大类。可以使用 insertRow(index)方法创建表格元素。其中,insertRow(index)中的 index是一个数字，表该行的序号,从0开始计数。相应的,可以使用 deleteRowIndex(index)方法删除表格元素。
  • 在 HTML 的<td>标签中，还有一个 cellndex属性，表示当前行中表元的索引。可以通过该属性向 insertCell( )方法(插入表元)和 deleteCell( )方法(删除表元)传递参数，达到操作表元的目的。
<script type="text/javascript">
<!--
//通过id获取该表格的相关属性
var theTable = document.getElementById("table1");
function doRowInsert(row) //函数：插入行
{
var rowNumber = parseFloat(row);  //对行数进行转换并存储
//如果输入的行数不小于0且不大于表格行数
if ((rowNumber>= 0) && (rowNumber <= theTable.rows.length))
theTable.insertRow(rowNumber); //插入该行
}
function doCellInsert(row,column) //函数：插入表元
{
var rowNumber = parseFloat(row); //对行数进行转换并存储
var colNumber = parseFloat(column); //对列数进行转换并存储
var numberRowsInTable = theTable.rows.length; //存储表格行数
//如果行数、列数都不小于0
if ((rowNumber>= 0 ) && (colNumber>= 0)){
//如果行号不小于表格行数
if (rowNumber>= numberRowsInTable){
//弹出对话框，提示不可操作
alert("行数超出范围");
return; //返回
} 
//如果列数大于表格中该行的列数
if (colNumber> theTable.rows[rowNumber].cells.length){
//弹出对话框，提示不可操作
alert("列数超出范围");
return;//返回
}
//在指定的行中插入指定列的表元
theTable.rows[rowNumber].insertCell(colNumber); 
}
}
function doCellModification(row,column,newValue) //函数：编辑表元
{
var rowNumber = parseFloat(row); //对行数进行转换并存储
var colNumber = parseFloat(column); //对列数进行转换并存储
var numberRowsInTable = theTable.rows.length; //存储表格行数
//如果行数、列数都不小于0
if ((rowNumber>= 0 ) && (colNumber>= 0)){
//如果行号不小于表格行数
if (rowNumber>= numberRowsInTable){
//弹出对话框，提示不可操作
alert("列数超出范围");
return;//返回
} 
//如果列数不小于表格中该行的列数
if (colNumber>= theTable.rows[rowNumber].cells.length){
//弹出对话框，提示不可操作
alert("超出了表格范围");
return;//返回
}
//在指定的行、列中插入新的表元内容
theTable.rows[rowNumber].cells[colNumber].innerHTML = newValue; 
}
}
function doCellDelete(row,column)    //函数：删除表元
{
var rowNumber = parseFloat(row); //对行数进行转换并存储
var colNumber = parseFloat(column); //对列数进行转换并存储
var numberRowsInTable = theTable.rows.length; //存储表格行数
//如果行数、列数都不小于0
if ((rowNumber>= 0 ) && (colNumber>= 0)){
//如果行号不小于表格行数
if (rowNumber>= numberRowsInTable){
//弹出对话框，提示不可操作
alert("超出了预定的行数");
return; //返回
} 
//如果列数不小于表格中该行的列数
if (colNumber>= theTable.rows[rowNumber].cells.length){
//弹出对话框，提示不可操作
alert("超出了预定的列数");
return; //返回
} 
//删除指定行中的指定列
theTable.rows[rowNumber].deleteCell(colNumber); 
}
}
//-->
</script>

分析

  • (1)程序首先建立了一个表格，并将其命名为“testTable”。随后，使用“theTable=document.getElementById(table1’);”将表格的相关属性取出，并存储在变量 theTable中。
  • (2)在函数 doRowInsert(row)中，使用if语句进行判断，如果输入的行数不小于0且不大于表格行数，则插入该行。
  • (3)在函数 doCellnsert(row,column)中，首先对用户输入的行数、列数进行判断，如果二者中有一个超出范围，则给出相应的提示信息;如果都符合要求，则调用insertCell()方法
  • 完成插入操作。
  • (4)在函数 doCellModification(row,column,newValue)中，首先判断用户输入的行、列数,如果二者中有一个超出范围，则给出相应的提示信息:如果都符合要求，则使用“theTable.rows[rowNumber].cells[colNumber].innerHTML=newValue;”完成表元插入操作。
  • (5)在函数 doCellDelete(row,coumn)中，首先对用户输入的行数、列数进行判断，如果二者中有一个超出范围，则给出相应的提示信息:如果都符合要求，则调用deleteCell()方法完成删除操作。
  • (6)在程序建立的表单中，共有4个按钮，各按钮的onclick事件分别关联上述4个函数中的一个，当用户单击该按钮时，则调用相应的函数，完成相应的操作。

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值