JavaScript增加一行的操作~知道的人写个例子~万分感谢~

本帖最后由 amore_xk 于 2010-03-21 20:22:18 编辑

解决方案 »

  1.   


    //@param id table的ID
    //@param n 新行作为表格第n行
    function addNewRow(id, n){
        var _table = document.getElementById(id);
        var _cellsLen= _table.rows[n].cells.length; //列数
        var _newRow = _table.insertRow(n); //增加新行
        var _newCell;
        for(var i = 0; i < _cellsLen; i++){  //给新行增加列
            _newCell = _newRow.insertCell(i);
            _newCell.innerHTML = i + 1;
        }
    }
      

  2.   

    不好意思，上面那个写的有BUG，下面对n作了限定，而且插入的新行列数等于原来第一行的列数。
    //@param id table的ID
    //@param n 新行作为表格第n行
    function addNewRow(id, n){
        var _table = document.getElementById(id);
        var _n = (n <= 0)? 1 : (n > _table_rows.length + 1)? _table_rows.length + 1 : n; 
        var _cellsLen= _table.rows[0].cells.length; //列数
        var _newRow = _table.insertRow(_n - 1); //增加新行
        var _newCell;
        for(var i = 0; i < _cellsLen; i++){  //给新行增加列
            _newCell = _newRow.insertCell(i);
            _newCell.innerHTML = i + 1;
        }
    }
      

  3.   

    一个简单例子，根据自己的情况去改吧。
    其实cloneNode(true)是个非常好的东西，但用的人似乎很少
    <!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>测试</title>
    <script language="javascript" type="text/javascript">
        var row = null;
        var tbl = null;
        window.onload = function() {
            tbl = document.getElementById("tblList");
            row = document.getElementById("tplRow");
        }
        function addRow() {
            var newRow = row.cloneNode(true);
            tbl.tBodies[0].appendChild(newRow);
        }
    </script>
    </head>
    <body>
        <input type="button" value="增加" onclick="addRow()" /><br/>
    <table id="tblList" border="1">
        <tr id="tplRow">
            <td>行业</td>
            <td>
                <select>
                    <option>---类别---</option>
                    <option value="0">饮食</option>
                    <option value="1">住宿</option>
                    <option value="2">交通</option>
                </select>
            </td>
        </tr>
    </table>
    </body>
    </html>
      

  4.   

    function findObj(theObj, theDoc)
    {
    var p, i, foundObj;
    if(!theDoc) theDoc = document;
    if( (p = theObj.indexOf("?")) > 0 && parent.frames.length)
    { 
        theDoc = parent.frames[theObj.substring(p+1)].document;    
        theObj = theObj.substring(0,p); 
    } 
    if(!(foundObj = theDoc[theObj]) && theDoc.all) 
        foundObj = theDoc.all[theObj]; 

    for (i=0; !foundObj && i < theDoc.forms.length; i++)     
        foundObj = theDoc.forms[i][theObj]; 

    for(i=0; !foundObj && theDoc.layers && i < theDoc.layers.length; i++)     
        foundObj = findObj(theObj,theDoc.layers[i].document); 
        
    if(!foundObj && document.getElementById) 
        foundObj = document.getElementById(theObj);    

    return foundObj;
    } function AddSignRow(){ //读取最后一行的行号，存放在txtTRLastIndex文本框中
        
        var sobj = document.getElementById("ju"); var sindex = sobj.selectedIndex; // 选中索引

    var stext = sobj.options[sindex].text; // 选中文本

        
        var nobj = document.getElementById("name"); var nindex = nobj.selectedIndex; // 选中索引

    var ntext = nobj.options[nindex].text; // 选中文本
        
        
        
        
        
        
       
        
    var txtTRLastIndex = findObj("txtTRLastIndex",document);

    var rowID = parseInt(txtTRLastIndex.value);

    var signFrame = findObj("SignFrame",document);

    //添加行
    var newTR = signFrame.insertRow(signFrame.rows.length);
    newTR.id = "SignItem" + rowID;

    //添加列:所属局
    var newTypeTD=newTR.insertCell(0);
    //添加列内容
    newTypeTD.innerHTML = stext;

    //添加列:姓名
    var newNameTD=newTR.insertCell(1);
    //添加列内容
    newNameTD.innerHTML =ntext ;

    //添加列:其他内容
    var newNameTD=newTR.insertCell(2);
    //添加列内容
    newNameTD.innerHTML ="其他内容";


    //添加列:删除按钮
    var newDeleteTD=newTR.insertCell(3);
    //添加列内容
    newDeleteTD.innerHTML = "<div align='center' style='width:40px'><a href='javascript:;' onclick=\"DeleteSignRow('SignItem" + rowID + "')\"><img alt='删除'src='../framework/sys-resources/images/ithc/btn_del.gif' /></a></div>";

    //将行号推进下一行
    txtTRLastIndex.value = (rowID + 1).toString() ;

    }