//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 |
Sorry, the comment form is closed at this time.
No comments yet.