一、使用HTML DOM創建表格函數
<script> window.onload=function(){ vartable=document.createElement("table"); //给表格添加属性 table.width=300;//还可以使用这种方法:table.setAttribute('width',300) table.border=1;</p> <p>//创建表格的标题 varcaption=document.createElement("caption"); table.appendChild(caption);</p> <p>//给表格的标题添加内容 //caption.innerHTML="人员表";//非W3c标准的方法 varcaptionText=document.createTextNode("人员表"); caption.appendChild(captionText);</p> <p> //创建表格的第一行,是个标题行 varthead=document.createElement("thead"); table.appendChild(thead);</p> <p>vartr=document.createElement("tr"); thead.appendChild(tr);</p> <p>//列 varth1=document.createElement("th"); tr.appendChild(th1); th1.innerHTML="数据"; varth2=document.createElement("th"); tr.appendChild(th2); th2.innerHTML="数据";</p> <p>document.body.appendChild(table); }; </script>
二、使用DOM獲取表格數據
window.onload=function(){ vartable=document.getElementsByTagName("table")[0]; alert(table.children[0].innerHTML); };
三、使用HTML DOM獲取表格數據
window.onload=function(){ //使用HTMLDOM来获取表格元素 vartable=document.getElementsByTagName('table')[0];//获取table引用 //按HTMLDOM来获取表格的<caption> alert(table.caption.innerHTML);//获取caption的内容 //table.caption.innerHTML="学生表";//还可以设置值 };
window.onload=function(){ //使用HTMLDOM来获取表格元素 vartable=document.getElementsByTagName('table')[0];//获取table引用 //按HTMLDOM来获取表头表尾<thead>、<tfoot> alert(table.tHead);//获取表头 alert(table.tFoot);//获取表尾</p> <p>//按HTMLDOM来获取表体<tbody> alert(table.tBodies);//获取表体的集合 };
在一个表格中<thead>和<tfoot>是唯一的,只能有一个。而<tbody>不是唯一的可以有多个,这样导致最后返回的<thead>和<tfoot>是元素引用,而<tbody>返回的是元素集合。
window.onload=function(){ //使用HTMLDOM来获取表格元素 vartable=document.getElementsByTagName('table')[0];//获取table引用 //按HTMLDOM来获取表格的行数 alert(table.rows.length);//获取行数的集合,数量</p> <p>//按HTMLDOM来获取表格主体里的行数 alert(table.tBodies[0].rows.length);//获取主体的行数的集合,数量 };
window.onload=function(){ //使用HTMLDOM来获取表格元素 vartable=document.getElementsByTagName('table')[0];//获取table引用</p> <p>//按HTMLDOM来获取表格主体内第一行的单元格数量(tr) alert(table.tBodies[0].rows[0].cells.length);//获取第一行单元格的数量 };
window.onload=function(){ //使用HTMLDOM来获取表格元素 vartable=document.getElementsByTagName('table')[0];//获取table引用</p> <p>//按HTMLDOM来获取表格主体内第一行第一个单元格的内容(td) alert(table.tBodies[0].rows[0].cells[0].innerHTML);//获取第一行第一个单元格的内容 };
<script> window.onload=function(){ //使用HTMLDOM来获取表格元素 vartable=document.getElementsByTagName('table')[0];//获取table引用</p> <p>//按HTMLDOM来删除标题、表头、表尾、行、单元格 //table.deleteCaption();//删除标题 //table.deleteTHead();//删除<thead> //table.tBodies[0].deleteRow(0);//删除<tr>一行 //table.tBodies[0].rows[0].deleteCell(0);//删除<td>一个单元格 //table.tBodies[0].rows[0].deleteCell(1);//删除一个单元格中的内容,相当于删除掉一个单元格,后面的但愿会补进 }; </script>
四、HTML DOM中常用的屬性和方法
- rows属性,返回表格中的tr元素对象数组,它的长度就是表格的行数
- createCaption()方法
- createTHead()方法
- createTFoot()方法
- insertRow()方法,在指定位置插入一行
- deleteRow()方,删除指定一行
-
TableRow Element表示表格的一行,TableRow的常用属性和方法:
- cells属性,值为行中td元素的对象数组
- rowIndex属性,表格中的总行号
- sectionRowIndex属性,该行在表格的某段的具体行号(相对于thead,tfoot)
- insertCell()方法,插入一个td
- deleteCell()删除一个td
TableCell Element表示表格的一个单元格,常见属性方法:
- cellIndex属性,单元格在该行的列号
TableSection 表示表格的一部分(thead,tbody,tfoot),常见属性方法与Table相同。
五、刪除列操作
第一種寫法 document.getElementById("grids~~TABLE").rows[0].deleteCell(4); document.getElementById("grids~~TABLE").rows[1].deleteCell(4);//代碼執行到這說明已經刪除了一列 document.getElementById("grids~~TABLE").rows[0].deleteCell(4); document.getElementById("grids~~TABLE").rows[1].deleteCell(4); */ 說明:總共有6列,由於已經刪除了一列,所以列數為5,但是還是從第五列開始刪除的 //第二種寫法 var rowNum0 = document.getElementById("grids~~TABLE").rows; //或者行數對象,rowNum.length為行數值 //alert(rowNum0.length); for(var j = 0;j<2;j++){//若刪除后三列2改為3 for(var i=0;i<rowNum0.length;i++){ document.getElementById("grids~~TABLE").rows[i].deleteCell(4);//若從第6列開始4改為5 } }
上述代碼是用JavaScript刪除一個行數為rowNum0.length、列數為6的表格,刪除后兩列(從第五列開始的,因為表格可以看成數組,故第一列用“0”表示)的操作函數
六、HTML Table對象之cellSpacing和cellPadding
cellPadding 属性可设置或返回单元格边框与单元格内容之间的空白量(以像素为单位)。
cellPadding设置或返回单元格内容和单元格边框之间的空白量。
用法:如:document.getElementById("table").cellPadding="15";
相关推荐
在JavaScript的世界里,Table表格对象是网页动态交互中不可或缺的一部分,尤其在处理用户数据展示和操作时。本文将深入探讨如何使用JavaScript来操作HTML中的表格元素,包括获取单元格、行的数据以及各种属性。 ...
使用JavaScript和DOM动态创建表格
总结来说,"HTML Table表格编辑器"是一款提高HTML表格操作效率的工具,它通过JavaScript实现了行的移动和单元格的编辑功能,为网页开发者和内容创作者提供了更为便利的工作环境。用户可以通过`index.htm`文件查看并...
在这个“07-DOM操作表格”的主题中,我们将深入探讨如何利用DOM API来操作HTML表格。 HTML表格是展示数据的常用方式,由`<table>`、`<tr>`(行)、`<td>`(单元格)和`<th>`(表头单元格)等元素构成。DOM操作表格...
在本主题"js表格操作,DOM实现数据动态增删查改"中,我们将深入探讨如何使用原生JavaScript通过DOM操作来实现数据在表格中的动态管理。 1. **创建表格**:首先,我们需要在HTML中创建一个基础的表格结构。这通常...
实验报告的主题是“JavaScript程序设计——DOM访问”,其目的是深入理解和掌握DOM(Document Object Model)在JavaScript中的应用,包括文档对象的属性、方法以及使用方式。DOM是HTML和XML文档的标准化表示,允许...
总的来说,原生js table表格自动排序效果的实现涉及到HTML结构的理解、JavaScript事件处理、数组排序算法的运用以及DOM操作。这是一个实用的功能,通过学习和理解这个例子,可以提升我们对前端开发中数据处理和交互...
8. **表格操作**:在HTML中,`<table>`元素及其子元素(`<tr>`, `<td>`, `<th>`等)可以通过DOM进行操作,例如,添加或删除行和单元格。 9. **表单操作**:DOM也允许我们处理表单元素,如`<input>`, `<select>`, `...
在网页设计中,HTML表格(Table)是一种常用的数据展示方式,有时我们需要实现表格内容的上下移动功能,以满足用户交互需求或数据操作便利性。本篇文章将详细讲解三种实现HTML表格内容上下移动的方法。 方法一:...
"页面html Table表格导出Execl"这个主题涉及的技术点主要包括HTML表格的处理、JavaScript(或者jQuery)用于前端交互、以及可能涉及的后端处理和文件下载技术。下面我们将详细探讨这些知识点。 1. **HTML表格(HTML...
"js实现漂亮的table表格"这个主题涉及到使用JavaScript和CSS来增强HTML表格的功能和外观,使其更具吸引力并提供更好的用户体验。下面我们将详细探讨这个主题中的关键知识点。 首先,HTML表格是网页上展示结构化数据...
Table 对象代表一个 HTML 表格,在 HTML 文档中,<table> 标签每出现一次,一个 Table 对象就会被创建。Table 对象的常用属性有: * cells:返回包含表格中所有单元格的一个数组 * rows:返回包含表格中所有行的一...
总的来说,JavaScript动态操作表格涉及创建、删除、选择和更新表格元素,这些都需要对DOM有深入理解。在实际应用中,还要考虑浏览器兼容性,特别是对于较旧的浏览器,如IE6和早期的Firefox版本。通过合理使用...
<table>标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTMLDOM来操作它; // 使用DOM来创建表格; var table = document.createElement('table'); table.border = 1; table.width = 300; var ...
在JavaScript编程中,动态操作HTML元素,特别是表格(table)元素,是常见的需求。这个案例主要涉及了如何使用JavaScript来实现表格的添加、删除等基本操作。这些功能对于网页交互性和用户体验有着重要的作用,尤其...
本资源“jQuery Table表格排序显示代码.zip”聚焦于利用jQuery实现动态表格排序的功能,这对于数据展示和用户交互至关重要。下面将详细阐述相关知识点。 1. **jQuery基础**:首先,理解jQuery的基础是至关重要的。...
本主题聚焦于如何利用DOM操作XML文档并将数据插入到HTML表格中。在实际应用中,这种技术常见于网页动态数据展示或者Web应用程序的数据交互。 首先,了解DOM的基本概念是必要的。DOM将XML或HTML文档视为一个由节点...
除了基本的创建和删除操作,对表格数据进行排序也是JavaScript处理表格的重要能力之一。`ascRow()`和`descRow()`分别用于按行升序和降序排列,而`ascCell()`和`descCell()`则对应于按列排序。实现这一功能的关键在于...
### JavaScript操作表格知识点详解 #### 一、创建表格 在给定的内容中,我们首先看到了一个简单的示例,展示了如何使用JavaScript动态创建一个表格。这个过程主要包括以下几个步骤: 1. **获取容器元素**:通过`...