`

JavaScript之HTML DOM操作Table(表格)對象

 
阅读更多

一、使用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的世界里,Table表格对象是网页动态交互中不可或缺的一部分,尤其在处理用户数据展示和操作时。本文将深入探讨如何使用JavaScript来操作HTML中的表格元素,包括获取单元格、行的数据以及各种属性。 ...

    使用JavaScript和DOM动态创建表格

    使用JavaScript和DOM动态创建表格

    HTML table表格编辑器

    总结来说,"HTML Table表格编辑器"是一款提高HTML表格操作效率的工具,它通过JavaScript实现了行的移动和单元格的编辑功能,为网页开发者和内容创作者提供了更为便利的工作环境。用户可以通过`index.htm`文件查看并...

    07-DOM操作表格

    在这个“07-DOM操作表格”的主题中,我们将深入探讨如何利用DOM API来操作HTML表格。 HTML表格是展示数据的常用方式,由`&lt;table&gt;`、`&lt;tr&gt;`(行)、`&lt;td&gt;`(单元格)和`&lt;th&gt;`(表头单元格)等元素构成。DOM操作表格...

    js表格操作,DOM实现数据动态增删查改

    在本主题"js表格操作,DOM实现数据动态增删查改"中,我们将深入探讨如何使用原生JavaScript通过DOM操作来实现数据在表格中的动态管理。 1. **创建表格**:首先,我们需要在HTML中创建一个基础的表格结构。这通常...

    JavaScript程序设计——DOM访问实验报告.docx

    实验报告的主题是“JavaScript程序设计——DOM访问”,其目的是深入理解和掌握DOM(Document Object Model)在JavaScript中的应用,包括文档对象的属性、方法以及使用方式。DOM是HTML和XML文档的标准化表示,允许...

    原生js table表格自动排序效果

    总的来说,原生js table表格自动排序效果的实现涉及到HTML结构的理解、JavaScript事件处理、数组排序算法的运用以及DOM操作。这是一个实用的功能,通过学习和理解这个例子,可以提升我们对前端开发中数据处理和交互...

    js_HTML_Dom操作练习

    8. **表格操作**:在HTML中,`&lt;table&gt;`元素及其子元素(`&lt;tr&gt;`, `&lt;td&gt;`, `&lt;th&gt;`等)可以通过DOM进行操作,例如,添加或删除行和单元格。 9. **表单操作**:DOM也允许我们处理表单元素,如`&lt;input&gt;`, `&lt;select&gt;`, `...

    table表格内容上下移动的三种实现方法

    在网页设计中,HTML表格(Table)是一种常用的数据展示方式,有时我们需要实现表格内容的上下移动功能,以满足用户交互需求或数据操作便利性。本篇文章将详细讲解三种实现HTML表格内容上下移动的方法。 方法一:...

    页面html Table表格导出Execl

    "页面html Table表格导出Execl"这个主题涉及的技术点主要包括HTML表格的处理、JavaScript(或者jQuery)用于前端交互、以及可能涉及的后端处理和文件下载技术。下面我们将详细探讨这些知识点。 1. **HTML表格(HTML...

    js实现漂亮的table表格

    "js实现漂亮的table表格"这个主题涉及到使用JavaScript和CSS来增强HTML表格的功能和外观,使其更具吸引力并提供更好的用户体验。下面我们将详细探讨这个主题中的关键知识点。 首先,HTML表格是网页上展示结构化数据...

    038HTML-DOM对象.doc

    Table 对象代表一个 HTML 表格,在 HTML 文档中,&lt;table&gt; 标签每出现一次,一个 Table 对象就会被创建。Table 对象的常用属性有: * cells:返回包含表格中所有单元格的一个数组 * rows:返回包含表格中所有行的一...

    javascript动态操作表格

    总的来说,JavaScript动态操作表格涉及创建、删除、选择和更新表格元素,这些都需要对DOM有深入理解。在实际应用中,还要考虑浏览器兼容性,特别是对于较旧的浏览器,如IE6和早期的Firefox版本。通过合理使用...

    JavaScript DOM操作表格及样式

    &lt;table&gt;标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTMLDOM来操作它; // 使用DOM来创建表格; var table = document.createElement('table'); table.border = 1; table.width = 300; var ...

    javascript实现表格添加删除等操作

    在JavaScript编程中,动态操作HTML元素,特别是表格(table)元素,是常见的需求。这个案例主要涉及了如何使用JavaScript来实现表格的添加、删除等基本操作。这些功能对于网页交互性和用户体验有着重要的作用,尤其...

    jQuery Table表格排序显示代码.zip

    本资源“jQuery Table表格排序显示代码.zip”聚焦于利用jQuery实现动态表格排序的功能,这对于数据展示和用户交互至关重要。下面将详细阐述相关知识点。 1. **jQuery基础**:首先,理解jQuery的基础是至关重要的。...

    DOM操作XML文档向表格添加数据.rar

    本主题聚焦于如何利用DOM操作XML文档并将数据插入到HTML表格中。在实际应用中,这种技术常见于网页动态数据展示或者Web应用程序的数据交互。 首先,了解DOM的基本概念是必要的。DOM将XML或HTML文档视为一个由节点...

    javascript表格操作

    除了基本的创建和删除操作,对表格数据进行排序也是JavaScript处理表格的重要能力之一。`ascRow()`和`descRow()`分别用于按行升序和降序排列,而`ascCell()`和`descCell()`则对应于按列排序。实现这一功能的关键在于...

    JavaScript操作表格

    ### JavaScript操作表格知识点详解 #### 一、创建表格 在给定的内容中,我们首先看到了一个简单的示例,展示了如何使用JavaScript动态创建一个表格。这个过程主要包括以下几个步骤: 1. **获取容器元素**:通过`...

Global site tag (gtag.js) - Google Analytics