现在的位置: 首页 > 综合 > 正文

动态增减表格行列

2013年10月26日 ⁄ 综合 ⁄ 共 2098字 ⁄ 字号 评论关闭

        近日为相关部门写一个在线编辑表格的程序,其中涉及到了动态增加、减少单元格行列的问题,在参考了网上一些文章和查阅了相关资料后,发现有些文章实现方式过于复杂,对于像我这样的没有系统学过DHTML的入门者来说理解有些困难,所以在这里总结了一种很容易理解且实现的方法:

     在要完成这项工作之前需要建有一个表格(当然可以动态的建立):     

    比如:(注意以下几个点: id="dynamic_table" ,还有样式之类的,因为它默认决定了动态生成的表格的风格)

<table id="dynamic_table" width="100%" height="37" border="1" cellspacing="0" bordercolor="#000000">
        <tr>
          <td width="15%" height="20" >指 标</td>
          <td width="7%" >单位</td>
          <td width="14%" bordercolor="#000000"><input name="param2_0" type="text" id="param2_0" size="15"/></td>
        </tr>
              </table>

以下为具体函数实现,是根据上面的表格"dynamic_table"而设计的,所以具体的不同应用代码会有不同

<SCRIPT LANGUAGE="JScript">

var row_count=0; 
var col_count=0;

function add_new_row(value1,value2)   //增加一行
{
var table=document.all("dynamic_table")
maxcell=table.rows(0).cells.length;
mynewrow = tableinsertRow();
row_count++;
for (i=0;i<maxcell;i++)
{
cell=mynewrow.insertCell();
if (i==0)
cell.innerHTML="<input name="+value1+row_count+" type=text size=20 style='BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 1px; BORDER-BOTTOM-COLOR: red; BORDER-RIGHT-WIDTH: 0px'/>";
else if (i==1)
cell.innerHTML="<input name="+value2+row_count+" type=text size=8 style='BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 1px; BORDER-BOTTOM-COLOR: red; BORDER-RIGHT-WIDTH: 0px'/>";
else
cell.innerHTML="&nbsp;";
}

}

function add_new_col(value)  //增加一列
{
var table=document.all("dynamic_table")
max_row=table.rows.length;

col_count++;
for (i=0;i<max_row;i++)
{
cell=table.rows(i).insertCell();
if (i==0)
cell.innerHTML="<input name="+value+col_count+" type=text size=15 style='BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 1px; BORDER-BOTTOM-COLOR: red; BORDER-RIGHT-WIDTH: 0px'/>";

else
cell.innerHTML="&nbsp;";
}

}

function tb_delete_row()   //删除一行

{
var table=document.all("dynamic_table");
if (row_count>0)
{
table.deleteRow();
row_count--;
}
}
function tb_delete_col()    //删除一列
{
var table=document.all("dynamic_table");
if (col_count>0)
{
for (i=0;i<=row_count+1;i++)
table.rows(i).deleteCell();
col_count--;
}
}

</SCRIPT>

当然如果要详细了解相关的知识最好还是到MSDN去:http://msdn.microsoft.com/library/default.asp?url=/workshop/author/tables/buildtables.asp

From IT is Alex.Net

抱歉!评论已关闭.