快捷導(dǎo)航

一組JS創(chuàng)建和操作表格的函數(shù)集合

更新時(shí)間：2009年05月07日 15:45:09 作者：

在用AJAX的時(shí)候，經(jīng)常要用JS操作DOM，當(dāng)涉及到數(shù)據(jù)列表的時(shí)候，那用表格比較多，這里寫了組函數(shù)集合，專門用來操作表格，當(dāng)然，目前還有很多不足，但是對(duì)一些簡(jiǎn)單操作還是很方便的。

stone.js
//**************************************神吹表格操作函數(shù)*******************************************************
//隱藏列
function setHiddenRow(tb,iCol){
for (i=0;i<oTable.rows.length;i++){
tb.rows[i].cells[iCol].style.display = oTable.rows[i].cells[iCol].style.display=="none"?"block":"none";
}
}
//隱藏行
function setHiddenRow(tb,iRow){
tb.rows[iRow].style.display = oTable.rows[iRow].style.display == "none"?"block":"none";
}
//創(chuàng)建表格
function createTable(id,rows,cells,tbid){
var tb=document.createElement("table");
var tbody = document.createElement("tbody");
for(var i=0;i<rows;i++){
var tr=document.createElement("tr");
for(var j=0;j<cells;j++){
var cell=document.createElement("td");
tr.appendChild(cell);
}
tbody.appendChild(tr);
}
tb.appendChild(tbody);
tb.setAttribute("id",tbid);//設(shè)置創(chuàng)建的TABLE的ID
document.getElementById(id).appendChild(tb);
}
//插入文本
function insertText(tb,row,cel,text){
txt=document.createTextNode(text);
tb.rows[row].cells[cel].appendChild(txt);
}
//修改文本
function updateText(tb,row,cel,text){
tb.rows[row].cells[cel].firstChild.nodeValue=text;
}
//添加子節(jié)點(diǎn)
function toAppendChild(tb,row,cel,child){
tb.rows[row].cells[cel].appendChild(child);
}
//刪除某行
function removeRow(tb,row){
tb.lastChild.removeChild(tb.rows[row]);
}
//單元格設(shè)置屬性
function cellSetAttribute(tb,row,col,attributeName,attributeValue){
tb.rows[row].cells[col].setAttribute(attributeName,attributeValue);
}
//單元格添加監(jiān)聽器
function cellAddListener(tb,row,cel,event,fun){
if(window.addEventListener)
{
//其它瀏覽器的事件代碼: Mozilla, Netscape, Firefox
//添加的事件的順序即執(zhí)行順序 //注意用 addEventListener 添加帶on的事件，不用加on
// img.addEventListener('click', delRow(this), true);
tb.rows[row].cells[cel].addEventListener(event,fun, true);
}
else
{
//IE 的事件代碼在原先事件上添加 add 方法
// img.attachEvent('onclick',delRow(this));
tb.rows[row].cells[cel].attachEvent("on"+event,fun);
}
}
//新增行
function insertRow(oTable){
var tr=document.createElement("tr");
for (i=0;i<oTable.rows[0].cells.length;i++){
var td= document.createElement("td");
tr.appendChild(td);
}
oTable.lastChild.appendChild(tr);
}
//行設(shè)置屬性
function rowSetAttribute(tb,row,attributeName,attributeValue){
tb.rows[row].setAttribute(attributeName,attributeValue);
}
//行添加監(jiān)聽器
function rowAddListener(tb,row,event,fun){
if(window.addEventListener)
{
//其它瀏覽器的事件代碼: Mozilla, Netscape, Firefox
//添加的事件的順序即執(zhí)行順序 //注意用 addEventListener 添加帶on的事件，不用加on
// img.addEventListener('click', delRow(this), true);
tb.rows[row].addEventListener(event,fun, true);
}
else
{
//IE 的事件代碼在原先事件上添加 add 方法
// img.attachEvent('onclick',delRow(this));
tb.rows[row].attachEvent("on"+event,fun);
}
}
//新增列
function addCells(tb){
for (i=0;i<tb.rows.length;i++){
var td= document.createElement("td");
tb.rows[i].appendChild(td);
}
}
//批量修改單元格屬性
function cellsSetAttribute(oTable,attributeName,attributeValue){
for (i=0;i<oTable.rows.length;i++){
for (j=0;j<oTable.rows[i].cells.length;j++){
oTable.rows[i].cells[j].setAttribute(attributeName,attributeValue);
}
}
}
//合并只支持單向合并
//行合并
function mergerRow(tb,row,cell,num){
for(var i= (row+1),j=0;j<(num-1);j++){
tb.rows[i].removeChild(tb.rows[i].cells[cell]);
}
tb.rows[row].cells[cell].setAttribute("rowspan",num);
// document.getElementById('c').innerHTML=document.getElementById('u').innerHTML;
}
//列合并
function mergerCell(tb,row,cell,num){
for(var i= (cell+1), j=0;j<(num-1);j++){
tb.rows[row].removeChild(tb.rows[row].cells[i]);
}
tb.rows[row].cells[cell].setAttribute("colspan",num);
// document.getElementById('c').innerHTML=document.getElementById('u').innerHTML;
}
測(cè)試DEMO
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style>
.testclass{background-color:yellow;}
</style>
<script type="text/javascript" src="stone.js"></script>
<script type="text/javascript">

</script>
</head>
<body>
表格函數(shù)測(cè)試<br />
<div id="u">
</div>
<input type="button" value="新建一個(gè)5X5的表格" onclick="createTable('u',5,5,'mytable');" />  
<input type="button" value="顯示表格邊框" onclick="document.getElementById('mytable').setAttribute('border',1);" />  
<input type="button" value="插入文本" onclick="giveText();" />  
<input type="button" value="修改文本" onclick="updateText(mytable,3,3,'text')" />  <br />
<input type="button" value="添加子節(jié)點(diǎn)input" onclick="addInput();" />  
<input type="button" value="刪除第5行" onclick="removeRow(mytable,4);" />  
<input type="button" value="設(shè)置單元格寬度" onclick="cellSetAttribute(mytable,0,0,'width','50')" />  
<input type="button" value="添加單元格監(jiān)聽器" onclick="cellAddListener(mytable,2,2,'click',listen)" />  <br />
<input type="button" value="行合并" onclick="mergerRow(mytable,2,1,2); document.getElementById('u').innerHTML=document.getElementById('u').innerHTML;" />  
<input type="button" value="列合并" onclick="mergerCell(mytable,1,2,3); document.getElementById('u').innerHTML=document.getElementById('u').innerHTML;" />  
<input type="button" value="設(shè)置單元格背景色" onclick="cellsSetAttribute(mytable,'class','testclass'); document.getElementById('u').innerHTML=document.getElementById('u').innerHTML;" />  
<input type="button" value="設(shè)置行高" onclick="rowSetAttribute(mytable,2,'height','50');" />  <br />
<input type="button" value="新增第4行監(jiān)聽器" onclick="rowAddListener(mytable,3,'click',listen);" />  
<input type="button" value="新增一行" onclick="insertRow(mytable);" />  
<input type="button" value="新增列" onclick="addCells(mytable);" />  
</body>
</html>
測(cè)試截圖：