asp.net中js对table表进行操作

最新推荐文章于 2025-12-01 22:23:21 发布

原创最新推荐文章于 2025-12-01 22:23:21 发布 · 549 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#asp.net #table #input #function #button #server

本文提供了一段JavaScript代码，用于实现HTML表格的行增加与删除功能。通过查找已选中的行并进行删除，或者向表格末尾添加新行，使得用户能够便捷地管理表格内容。

<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% 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>重点工作</b><</td>
    <td bgcolor=gray valign=middle align=center><b>内容</b><</td>
    <td bgcolor=gray valign=middle align=center style="width: 10%"><b>出席领导</b></td>
    <td bgcolor=gray width="10%" valign=middle align=center><b>承办单位</b></td>
    <td bgcolor=gray width="5%" valign=middle align=center><b>第一周</b></td>
    <td bgcolor=gray width="5%" valign=middle align=center><b>第二周</b></td>
    <td bgcolor=gray width="5%" valign=middle align=center><b>第三周</b></td>
    <td bgcolor=gray width="5%" valign=middle align=center><b>第四周</b></td>
    <td bgcolor=gray width="5%" valign=middle align=center><b>第五周</b></td>
    <td bgcolor=gray width="10%" valign=middle align=center><b>备注</b></td>
</tr>
</table>
<br>
<div align=center>
<input type="button" onclick="add()" value="增加" runat="server">  
<input type="button" onclick="del()" value="删除" runat="server"></div>
<br>
</body>
</html>