网站首页 > 知识剖析正文

JavaScript 动态控制表格行和列

nixiaole 2024-11-25 15:48:16 知识剖析 30 ℃

表单常用的DOM操作

Table 对象集合(行与列从0开始计数)

cells[] 返回包含表格中所有单元格的一个数组。

rows[] 返回包含表格中所有行的一个数组。

tBodies[] 返回包含表格中所有tbody 的一个数组

针对<table>元素(行与列从0开始计数)

caption 指向<caption>元素(如果存在)

tBodies 指向<tbody>元素的集合

tFoot 指向<tfoot>元素(如果存在)

tHead 指向<thead>元素(如果存在)

rows 表格中所有行的集合

deleteRow(position) 删除指定位置上的行

insertRow(position) 在rows集合中的指定位置插入一个新行

createCaption() 创建<caption>元素并将其放入表格中;//括号内不需要插入值

deleteCaption() 删除<caption>元素 //括号内不需要插入值

针对<tbody>元素(手册上没有)

rows <tbody>中所有行的集合

deleteRows(position) 删除指定位置上的行浏览器已不支持

insertRows(position) 在rows集合中的指定位置插入一个新行浏览器已不支持

针对<tr>元素

cells <tr>中所有单元格的集合

deleteCell(position) 删除给定位置上的单元格

insertCell(position) 在cells集合的给定位置上插入一个新的单元格

注意：是否使用tBodies[0]属性, 将会影响所操作的行与列

而浏览器已经删除了deleteRows(position)、insertRows(position)方法, 统一使用deleteRow()、insertRow()方法

获取表格的数据:

实例1:

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function ()
{
var oTab=document.getElementById('tab1');
//alert(oTab.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[1].getElementsByTagName('td')[1].innerHTML);
alert(oTab.tBodies[0].rows[1].cells[1].innerHTML);
alert(oTab.tBodies[0].rows.length); //返回值为:5 因为<tbody></tbody>标记内有5行
alert(oTab.rows.length); //tBodies[0]可以省略, 但返回值为:6 因为<thead></thead>标记有1行, <tbody></tbody>标记内有5行

};
</script>
</head>
<body>
<table id="tab1" border="1" width="500">
<thead> <!-- 尽管没有<tr>标记, 但浏览器也认定算是一行 -->
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Blue</td>
<td>27</td>
</tr>
<tr>
<td>2</td>
<td>张三</td>
<td>23</td>
</tr>
<tr>
<td>3</td>
<td>李四</td>
<td>28</td>
</tr>
<tr>
<td>4</td>
<td>王五</td>
<td>25</td>
</tr>
<tr>
<td>5</td>
<td>张伟</td>
<td>24</td>
</tr>
</tbody>
</table>
</body>
</html>

动态添加表格:

<script language="javascript">
window.onload=function(){
var oTr = document.getElementById("member").insertRow(2); //插入一行
var aText = new Array();
aText[0] = document.createTextNode("fresheggs");
aText[1] = document.createTextNode("W610");
aText[2] = document.createTextNode("Nov 5th");
aText[3] = document.createTextNode("Scorpio");
aText[4] = document.createTextNode("1038818");
for(var i=0;i<aText.length;i++){
var oTd = oTr.insertCell(i);
oTd.appendChild(aText[i]);
}
}
</script>

修改单元格内容:

当表格建立了以后,可以通过HTML DOM属性直接对单元格进行引用,相比getElementById()、getElementsByTagName()等方法一个个寻找要方便得多;

oTable.rows[i].cells[j]

<script language="javascript">
window.onload=function(){
var oTable = document.getElementById("member");
oTable.rows[3].cells[4].innerHTML = "lost"; //修改单元格内容
}
</script>

动态删除表格:

<script language="javascript">
window.onload=function(){
var oTable = document.getElementById("member");
oTable.deleteRow(2); //删除一行，后面的行号自动补齐
oTable.rows[2].deleteCell(1); //删除一个单元格，后面的也自动补齐
}
</script>

动态删除表格的行

<script language="javascript">
function myDelete(){
var oTable = document.getElementById("member"); //经过测试,这是多余的语句
//删除该行
this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
}
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);
}
window.onload=function(){
var oTable = document.getElementById("member");
deleteColumn(oTable,2); //使用删除列的自定义函数
}
</script>

上一篇： HTML中的文档流和文本流
下一篇：第14节 Javascript函数-零点程序员-王唯

网站首页 > 知识剖析 正文

JavaScript 动态控制表格行和列

猜你喜欢

网站首页 > 知识剖析正文