javascript操作表格

 

< html >
< head ></ head >
< script  type ="text/javascript" > ...
//返回指定表格中，第一个被选定的行
function findCheckedRow(oTable)
...{
    for(var i=1;i<oTable.rows.length;i++)
    ...{
        if (oTable.rows[i].cells[1].childNodes[0].checked)
            return i
    }
    return 0
}
//删除表格的指定行
function delRow(oTable,delNum)
...{
    var totalRows = oTable.rows.length
    //要删除的行是表格的最后一行
    if (delNum == totalRows-1)
    ...{
        oTable.deleteRow(delNum)
        return
    }
    //要删除的行不是表格的最后一行，要为此行后面的行重写序号
    oTable.deleteRow(delNum)
    var totalRows = oTable.rows.length
    for(var k=delNum;k<totalRows;k++)
    ...{
        var tempCell = oTable.rows[k].cells[0]
        tempCell.innerHTML = delNum;
        delNum++;
    }
}
function del() ...{
    var oTable = document.getElementById("oTable")
    var totalRows=oTable.rows.length
    var delNum=0
    if(totalRows==1) return;
    else
    ...{
        var i = findCheckedRow(oTable)
        for(;0 != i;i = findCheckedRow(oTable))
            delRow(oTable,i)
    }
}
function add()
...{
 
    var oTable = document.getElementById("oTable")
    j=oTable.rows.length
    newRow=oTable.insertRow(-1)
        newRow.setAttribute("id","Row" + j);
        newcell=newRow.insertCell()
        newcell.innerHTML=j
        newcell=newRow.insertCell()
        newcell.innerHTML=
            "<input id="+j+" type=checkbox>"
        newcell=newRow.insertCell()
        newcell.innerHTML=
        "<input id=fldZDGZ"+j+" type=text style='width:100%'>";
        newcell=newRow.insertCell()
        newcell.innerHTML=
        "<input id=fldNR"+j+" type=text style='width:100%'>";
    newcell=newRow.insertCell()
    var vName= "fldCXLD"+j
        newcell.innerHTML="<input name="+vName+" type=text style='width:100%'>"
    newcell=newRow.insertCell()
        newcell.innerHTML=
        "<input name=fldCBDW"+j+" type=text style='width:100%'>";
    newcell=newRow.insertCell()
        newcell.innerHTML=
            "<input name=fldWCJD"+j+" type=checkbox>"
        newcell=newRow.insertCell()
        newcell.innerHTML=
            "<input name=fldWCJD"+j+" type=checkbox>"
        newcell=newRow.insertCell()
        newcell.innerHTML=
            "<input name=fldWCJD"+j+" type=checkbox>"
        newcell=newRow.insertCell()
        newcell.innerHTML=
            "<input name=fldWCJD"+j+" type=checkbox>"
        newcell=newRow.insertCell()
        newcell.innerHTML=
            "<input name=fldWCJD"+j+" type=checkbox>"
    newcell=newRow.insertCell()
        newcell.innerHTML=
        "<input name=fldBZ"+j+" type=text style='width:100%'>";
    
}
</ script >
< body >
< table  border =1  align =center  width =100%  border =1  id =oTable  cellspacing =0  cellpadding =0 >
< tr  valign ="top" >
     < td  bgcolor =gray  width ="4%"  valign =middle  align =center >< b > 序号 </ b ></ td >
     < td  bgcolor =gray  width ="4%"  valign =middle  align =center >< b ></ b ></ td >
        
< td  bgcolor =gray  width ="10%"  valign =middle  align =center >< b > 重点工作 </ td >
     < td  bgcolor =gray  valign =middle  align =center >< b > 内容 </ td >
     < td  bgcolor =gray  width ="10%"  valign =middle  align =center >< b > 出席领导 </ td >
     < td  bgcolor =gray  width ="10%"  valign =middle  align =center >< b > 承办单位 </ td >
     < td  bgcolor =gray  width ="5%"  valign =middle  align =center >< b > 第一周 </ td >
     < td  bgcolor =gray  width ="5%"  valign =middle  align =center >< b > 第二周 </ td >
     < td  bgcolor =gray  width ="5%"  valign =middle  align =center >< b > 第三周 </ td >
     < td  bgcolor =gray  width ="5%"  valign =middle  align =center >< b > 第四周 </ td >
     < td  bgcolor =gray  width ="5%"  valign =middle  align =center >< b > 第五周 </ td >
     < td  bgcolor =gray  width ="10%"  valign =middle  align =center >< b > 备注 </ td >
</ tr >
</ table >
< br >
< div  align =center >
< input  type =button  onclick =add()  value =增加 > &nbsp;&nbsp;
< input  type =button  onclick =del()  value =删除 ></ div >
< br >
</ body >
</ html >