javascript操纵表格

发表于: sitebuild | 作者: | 日期: 2008/11/10 04:11


//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

: https://blog.darkmi.com/2008/11/10/412.html

本文相关评论 - 1条评论都没有呢
Post a comment now » 本文目前不可评论

No comments yet.

Sorry, the comment form is closed at this time.