javascript操纵表格


//js动态创建一个基本的表格
function createTable(){
var oTableWrap = document.getElementById(“tableWrap”);
var oTable = document.createElement(“table”);
oTableWrap.appendChild(oTable);
var trId = oTable.insertRow();
var tdId = trId.insertCell();
tdId.innerText = ‘aaa’;
tdId = trId.insertCell();
tdId.innerText = ‘bbb’;
}

说明:
1、tableWrap是一个ID为tableWrap的div。
2、两个关键的方法是:insertRow()、insertCell();
3、单元格内容的设置可以通过如下两种方法
tdID.innerHTML = “hello world”;
tdID.innerText = “hello world”;


//获得当前表格的行数
function getRowCount(tableId){
var oTable = document.getElementById(“tableId”);
return oTable.rows.length;
}

//获得指定行的单元格数量
function getCellCount(rowIndex){
var oTable = document.getElementById(“myTable”);
alert(oTable.rows[rowIndex].cells.length);
}


//设置表格属性
function setTrProperty(tableId, rowIndex){
var oTable = document.getElementById(tableId);
var oTr = oTable.rows[rowIndex];
//设置表格宽度
oTable.width = ‘200px’;
//设置表格对齐方式
oTable.align = ‘center’;
//奇怪,以下的两个属性设置无效
//oTable.cellpadding = ’20px’;
//oTable.cellspacing = ’10px’;
//设置背景色
oTr.bgColor = ‘red’;
//设置行内文本的对齐方式
oTr.align = ‘right’;
//添加事件处理器,newClick是一个自定义方法名
oTr.onclick = newClick;
}

说明:
cellpadding、cellspacing属性的设置不能生效,不知道为什么。


//删除表格
function removeTable(){
var oTable = document.getElementById(“myTable”);
oTable.parentNode.removeChild(oTable);
}

//删除指定表格所有的行
function removeTrs(tableId){
var oTable = document.getElementById(tableId);
oTable.removeNode(true);
}

//删除表格的指定行
function removeRow(TableId, trIndex){
var oTable = document.getElementById(“myTable”);
oTable.deleteRow(trIndex);
}

function newClick(){
alert(“hello”);
}

获得当前行的索引值并删除当前行:

onclick=”alert(this.parentElement.parentElement.rowIndex);this.parentElement.parentElement.removeNode(true);”

a
b
此条目发表在sitebuild分类目录,贴了, , 标签。将固定链接加入收藏夹。

发表回复

您的电子邮箱地址不会被公开。

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据