高table操作.php

来自「php绿色服务器,让大家试用greenamp」· PHP 代码 · 共 424 行 · 第 1/2 页

 用Javascript动态添加和删除表格行(2)源代码 
JavaScript源代码

/* ------------------------------------------------------------------------------------------------------------- 
*说      明：本程序用于动态添加和删除表格之行(TR)，并复制行中各标签，复制的标签对象将是表格中第一个含有标签的行 
            使用前请确保表格至少有一行可用来复制，并且各列的标签必须单一，而radio组必须先设名称(name)，name的字符串不能其它属性重复 
            在每行末尾的单元格(TD)内必须有一添加和删除行的按钮， 
            在按钮的onclick事件中分别调用addRow和delRow方法在该行的下面添加一行和删除该行。 
*使用方法：推荐(适用一个页面只处理一个表格的情况) 
            (1)initTable(table)            : 初始化表格，需传递表格的id或表格对象。在初始化页面时就需调用该函数。 
            (2)addRow()和delRow()        : 分别用于“添加”和“删除”按钮的onClick事件中 
            (3)setBaseName(aStrName)    : 在提交表单时，设置表格行中各列标签的名称(从左至右的标签名)。参数为一数组 
            (4)getCount()                : 在提交表单时,获取表格含有标签的总行数。 
                                            假设用户设置的某个标签name值为"txt"，最后表格中各行的标签name值 
                                            从上至下将变为"txt_0","txt_1"...，直至"txt_getCount()-1" 
            如果一个页面需要操作多个表格，则按下面方法 
            (1)addRow(table)和delRow(table)         
                分别用于“添加”和“删除”按钮的onClick事件中，在调用函数时必须传递表格id或表格对象 
            (2)setTable(table),setBaseName(aStrName)和getCount() 
                提交表单时，分别设置表格的id或表格对象以及标签名，这样才能得到各个表格含有标签的总行数 
*作    者：曾次清 
*日    期：2004年10月13日 
*提    示：如果操作发生了错误，请试着去掉addRow(table)和delRow(table)函数中的第一个注释，以检查。 
*备    注：目前支持的标签有"INPUT","TEXTAREA","SELECT"， 
            如果要支持更多标签，请修改数组A_TAG_NAME和initTagValue(objTd)函数相应地方。 
-------------------------------------------------------------------------------------------------------------- */ 
var m_objTable;                //需要操纵的表格对象 
var m_strError;                //错误信息 
var m_aStrTagName;            //标签名，为一个数组，长度为表格的列数 

var m_aBgColor;                //各个单元格背景色，数组 
var m_aRowHtml;                //各个单元格内的html，数组 
var m_aHeight;                //各个单元格高度，数组 
var m_aAlign;                //各单元格水平对齐方式 

//设置支持的标签 
var A_TAG_NAME = new Array("INPUT","TEXTAREA","SELECT"); 


// ----------------------  初始化表格  ---------------------- // 

function initTable(table) 
{ 
    if( typeof(table) == "undefined" ) 
    { 
        alert("请传入参数：表格对象或表格id！"); 
        return; 
    } 
    setTable(table);     
    getRowProperty(getStartRow());        //获取行的相关属性 
}//end initTable(table) 


// -------------------  设置表格id或者表格对象 ------------------- // 
//如果不用此函数设置，则调用addRow和delRow函数时必须设置 

function setTable(table)           
{ 
    if(typeof(table) == "string") 
        this.m_objTable = getObjTableByID(table); 
    else if(typeof(table) == "object") 
        this.m_objTable = table; 
} 

// ---------------------- 设置表格各列中标签（HTML标签）的初始名称  ---------------------- // 

function setBaseName(aStrName) 
{ 
    if(typeof(m_objTable) == "undefined") 
    { 
        alert("您没有设置表格对象或表格id"); 
        return; 
    } 
    m_aStrTagName = aStrName; 
    setTagName(getStartRow(),getEndRow(),0); 
}//end setBaseName 

// ---------------------- 获取动态表格行数  ---------------------- // 
//只是能动态添加和删除的行数 
function getCount() 
{ 
    return (getEndRow() - getStartRow() + 1); 
} 

// ---------------- 在当前行的下方添加一行  ---------------- // 

function addRow(table) 
{ 
    //if(!isParameterTrue(addRow,table))    {alert(m_strError);return;} 
    if( typeof(table) != "undefined" )    initTable(table); 
     
    //得到当前行的索引 
    var intRowIndex = getRowIndex(); 
    var intNewTrIndex = intRowIndex + 1; 
    var aStrRowHtml = getNewRowHtml(getStartRow()); 
    m_objTable.insertRow(intNewTrIndex); 
     
    //将当前行各单元的innerHTML赋予新增行对应的各单元格 
    for(var i = 0;i < aStrRowHtml.length;i ++) 
    { 
        m_objTable.rows(intNewTrIndex).insertCell(); 
        m_objTable.rows(intNewTrIndex).cells(i).align = m_aAlign[i]; 
        if( m_aBgColor[i] != "") 
        { 
            m_objTable.rows(intNewTrIndex).cells(i).bgColor = m_aBgColor[i]; 
        } 
        if( m_aHeight[i] != "") 
        { 
            m_objTable.rows(intNewTrIndex).cells(i).height = m_aHeight[i]; 
        } 
        m_objTable.rows(intNewTrIndex).cells(i).innerHTML = aStrRowHtml[i]; 
        //最后一列为“添加行”、“删除行”的按钮，不需要赋予初值，其它列需要 
        if( i != (aStrRowHtml.length - 1)) 
            initTagValue(m_objTable.rows(intNewTrIndex).cells(i)); 
    } 
}//end addRow 

// ---------------------------- 删除当前行  ---------------------------- // 

function  delRow(table)   
{   
    try   
    {   
        //if(!isParameterTrue(delRow,table))    {alert(m_strError);return;} 
        if( typeof(table) != "undefined" )        setTable(table); 
         
        var Elm  =  event.srcElement; 
        while(Elm  &&  Elm.tagName  !=  "TR")   
        {   
            Elm  =  Elm.parentElement;   
        } 
        var intThisIndex = Elm.rowIndex; 
        Elm.parentElement.deleteRow(intThisIndex);   
    }   
    catch(ex)   
    {   
        alert("delRow() Err  5001:\r\n"  +  ex);   
        m_strError += "delRow() Error" + ex; 
    }   
}//end delRow() method 

// -------------------------  根据表格id得到表格对象  ------------------------- // 
//如果该id不存在，则返回null 
function getObjTableByID(tableID) 
{ 
    return document.getElementById(tableID); 
} 

/* ------------------------------------------------------------------------------------------------------ 
*功  能：设置各个单元格中标签名称，将从指定的起始行设置到指定的结束行 
*参  数：intStartRow ：开始要设置名称的标签所在行索引 
            intEndRow : 最后要设置名称的标签所在行索引 
            intStartNo : 标签的起始编号，逐个增加 
------------------------------------------------------------------------------------------------------ */ 
function setTagName(intStartRow,intEndRow,intStartNo) 
{ 
    for( var i = intStartRow; i <= intEndRow;i ++ ) 
    { 
        for( var j = 0;j < m_aStrTagName.length;j ++ ) 
        { 
            var strBaseName = m_aStrTagName[j]; 
            var strTagName = strBaseName + "_" + intStartNo; 
            var objTd = m_objTable.rows(i).cells(j); 
            var objTagList; 
            for(var m = 0;m < A_TAG_NAME.length;m ++) 
            { 
                objTagList = objTd.getElementsByTagName(A_TAG_NAME[m]); 
                if( objTagList.length != 0 ) 
                    break; 
            } 
            if( objTagList.length == 0 ) 
            { 
                alertTagName(); 
                return; 
            } 
            for( var m = 0; m < objTagList.length;m ++ ) 
                objTagList[m].setAttribute("name",strTagName); 
        } 
        intStartNo ++; 
    } 
}//end setTagName() method 

// ----------------------------------  给标签赋予初值   ---------------------------------- // 

//将文本框赋予空值，如果是radio、checkbox标签，则将它们checked属性设为false 
//如果是select标签，则选中第一行 

function initTagValue(objTd) 
{ 
    var strSetValue = ""; 
    var strInputType = "";        //input标签的型别，如radio，checkbox等 
    var objTagList; 
    var strTagName; 
    for( var i = 0;i < A_TAG_NAME.length;i ++ ) 
    { 
        objTagList = objTd.getElementsByTagName(A_TAG_NAME[i]); 
        if( objTagList.length != 0 ) 
        { 
            strTagName = A_TAG_NAME[i]; 
            break; 
        } 
    } 
    for( var m = 0; m < objTagList.length;m ++ ) 
    { 
        switch(strTagName) 
        { 
            case "INPUT" : 
                    strInputType = objTagList[m].type; 
                    if( strInputType == "text" ) 
                        objTagList[m].setAttribute("value",strSetValue); 
                    else if( strInputType == "radio" ||  strInputType == "checkbox") 
                        objTagList[m].setAttribute("checked",false);