Stone.js
God-blown table operation function *******************************************************
Hide Columns
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";
}
}
Hide Rows
function Sethiddenrow (tb,irow) {
Tb.rows[irow].style.display = Otable.rows[irow].style.display = = "None"? " Block ": none";
}
Create a table
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);//Set the ID of the table created
document.getElementById (ID). appendchild (TB);
}
Inserting text
function InsertText (tb,row,cel,text) {
Txt=document.createtextnode (text);
Tb.rows[row].cells[cel].appendchild (TXT);
}
Modify text
function UpdateText (tb,row,cel,text) {
Tb.rows[row].cells[cel].firstchild.nodevalue=text;
}
Add child nodes
function Toappendchild (tb,row,cel,child) {
Tb.rows[row].cells[cel].appendchild (child);
}
Delete a row
function Removerow (tb,row) {
Tb.lastChild.removeChild (Tb.rows[row]);
}
Cell Settings Property
function Cellsetattribute (tb,row,col,attributename,attributevalue) {
Tb.rows[row].cells[col].setattribute (Attributename,attributevalue);
}
Cell Add Listener
function Celladdlistener (tb,row,cel,event,fun) {
if (Window.addeventlistener)
{
event code for other browsers: Mozilla, Netscape, Firefox
The order of the added events is the order of execution//note adding the event with on with AddEventListener without on
Img.addeventlistener (' Click ', Delrow (this), true);
Tb.rows[row].cells[cel].addeventlistener (Event,fun, true);
}
Else
{
IE's event code adds the Add method to the original event
Img.attachevent (' onclick ', delrow (this));
Tb.rows[row].cells[cel].attachevent ("on" +event,fun);
}
}
New Line
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);
}
Row Set Properties
function Rowsetattribute (tb,row,attributename,attributevalue) {
Tb.rows[row].setattribute (Attributename,attributevalue);
}
Line Add listener
function Rowaddlistener (tb,row,event,fun) {
if (Window.addeventlistener)
{
event code for other browsers: Mozilla, Netscape, Firefox
The order of the added events is the order of execution//note adding the event with on with AddEventListener without on
Img.addeventlistener (' Click ', Delrow (this), true);
Tb.rows[row].addeventlistener (Event,fun, true);
}
Else
{
IE's event code adds the Add method to the original event
Img.attachevent (' onclick ', delrow (this));
Tb.rows[row].attachevent ("on" +event,fun);
}
}
New columns
function Addcells (TB) {
for (i=0;i<tb.rows.length;i++) {
var td= document.createelement ("TD");
Tb.rows[i].appendchild (TD);
}
}
Bulk Modify Cell Properties
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);
}
}
}
Merge only supports one-way merging
Row merge
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;
}
Column Merge
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;
}
Test Demo
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<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" >
<!--
function Givetext () {
for (Var i=0;i<5;i++) {
for (Var j=0;j<5;j++) {
InsertText (MYTABLE,I,J,I*5+J);
}
}
}
function Addinput () {
var input = document.createelement ("input");
Input.setattribute ("type", "text");
Input.setattribute ("Value", "I am new");
Toappendchild (Mytable,3,3,input);
}
function Listen () {
Alert (' Congratulations! Listener Installation Successful! ');
}
-->
</script>
<body>
Table function Test <br/>
<div id= "U" >
</div>
<input type= "button" value= "Create a new 5x5 form" onclick= "createtable (' U ', 5,5, ' mytable ');"/>
<input type= "button" value= "Displays the table border" onclick= "document.getElementById (' mytable '). setattribute (' border ', 1);"/ >
<input type= "button" value= "Insert text" onclick= "Givetext ();"/>
<input type= "button" value= "Modify text" onclick= "UpdateText (mytable,3,3, ' text ')"/> <br
<input type= "button" value= "Add child node Input" onclick= "addinput ();"/>
<input type= "button" value= "delete line 5th" onclick= "Removerow (mytable,4);"/>
<input type= "button" value= "Set cell width" onclick= "Cellsetattribute (mytable,0,0, ' width ', ' x ')"/>
<input type= "button" value= "Add Cell Listener" onclick= "Celladdlistener (mytable,2,2, ' click ', Listen)"/> <br
<input type= "button" value= "Row merged" onclick= "Mergerrow (mytable,2,1,2); document.getElementById (' u '). Innerhtml=document.getelementbyid (' U '). innerHTML;/>
<input type= "button" Value= "is listed as" onclick= "Mergercell (mytable,1,2,3); document.getElementById (' u '). Innerhtml=document.getelementbyid (' U '). innerHTML;/>
<input type= "button" value= "Set cell background color" onclick= "Cellssetattribute (mytable, ' class ', ' TestClass '); document.getElementById (' u '). Innerhtml=document.getelementbyid (' U '). innerHTML;/>
<input type= "button" value= "Set row height" onclick= "rowsetattribute (mytable,2, ' height ', ' a ');"/> <br
<input type= "button" value= "Add 4th Line Listener" onclick= "Rowaddlistener (mytable,3, ' click ', listen);"/>
<input type= "button" value= "Add a row" onclick= "InsertRow (mytable);"/>
<input type= "button" value= "Add Column" onclick= "Addcells (mytable);"/>
</body>
Test screenshot:
