动态添加行

最新推荐文章于 2022-05-20 09:08:01 发布

lsf5921

最新推荐文章于 2022-05-20 09:08:01 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏： asp技术文章标签： table class function javascript input button

本文链接：https://blog.youkuaiyun.com/lsf5921/article/details/2173159

asp技术专栏收录该内容

29 篇文章

订阅专栏

function add_Row(the_table,the_content,the_class,the_script) {
the_table=checkobj(the_table);
var the_row,the_cell;
var cur_rows=the_table.rows.length;
the_row=cur_rows==null?-1:(cur_rows);
var i=the_row;
var tag_id=i==-1?1:i+1;
the_content=the_content.split("<$td$>")
var newrow=the_table.insertRow(i);//得到插入位置
if (the_class!=null||the_class!="")
{newrow.className=the_class;}
for (j=0;j<the_content.length;j++)
{the_cell=newrow.insertCell(j);
the_content[j]=the_content[j].replace(//</$orderid/$/>/ig,"@$@"+tag_id);
the_content[j]=the_content[j].replace(//</$order/$/>/ig,tag_id);
the_cell.innerHTML=the_content[j];
the_cell.name="td@$@@$@td";
}
if (the_script!=null||the_script!="")
{the_script=the_script.replace(//</$orderid/$/>/ig,"@$@"+tag_id);
the_script=the_script.replace(//</$order/$/>/ig,tag_id);
eval(the_script);
}
}
//动态删除行 the_table需要动态表格id或者对象
function Get_Element(the_ele,the_tag){
the_tag = the_tag.toLowerCase();
if(the_ele.tagName.toLowerCase()==the_tag)
return the_ele;
while(the_ele=the_ele.offsetParent){
if(the_ele.name==the_tag)
return the_ele;
}
return(null);
}
function del_Row(the_table,the_autoobj){
the_table=checkobj(the_table);
var the_cell;
the_cell=Get_Element(event.srcElement,"td@$@@$@td");
var index=the_cell.parentElement.rowIndex;
var the_row,i,j;
if(the_cell==null) return;
if(the_table.rows.length==0) return;
the_table.deleteRow(index);
var the_childnode;
if(the_table.rows.length==0) return;
if(the_autoobj!=null&&the_autoobj!="")
{the_autoobj=the_autoobj.split(",")
for (i=index;i<the_table.rows.length;i++)
{
{for (j=0;j<the_autoobj.length;j++)
{
if(document.getElementById(the_autoobj[j]+"@$@"+(i+2).toString()))
{document.getElementById(the_autoobj[j]+"@$@"+(i+2).toString()).innerHTML=document.getElementById(the_autoobj[j]+"@$@"+(i+2).toString()).innerHTML.replace(//d+/g,(i+1).toString());
}
}
}
}
}
for (i=index;i<the_table.rows.length;i++)
{for (j=0;j<the_table.rows[i].cells.length;j++)
{
the_table.rows[i].cells[j].innerHTML=the_table.rows[i].cells[j].innerHTML.replace(//@/$/@/d+/g,"@$@"+(i+1).toString());
}
}
}
/*获取动态添加控件的值
the_table 需要动态添加子段的表格id,或者对象
the_hidden 隐藏控件id或者对象以，分割
*/
function get_Vals(the_table,the_hidden)
{the_table=checkobj(the_table);
the_hidden=the_hidden.split(",");
for (var m=0;m<the_hidden.length;m++)
{
the_hidden[m]=checkobj(the_hidden[m]);
}
var the_rows=the_table.rows.length;
var the_cells,the_childnodes,the_arr=new Array();
var tag_s;the_vals=new Array();
for (var i=0;i<the_rows;i++)
{
tag_s=0;
the_arr[i]=new Array();
for (var k=0;k<the_table.rows[i].cells.length;k++)
{the_cells=the_table.rows[i].cells[k];
the_childnodes=the_cells.childNodes;
for (var j=0;j<the_childnodes.length;j++)
{
if (the_childnodes[j].value)
{if (the_childnodes[j].type!="button"&&the_childnodes[j].type!="submit")
{
the_arr[i][tag_s]=the_childnodes[j].value;
tag_s++;
}
}
}
}
}
for (i=0;i<the_arr.length;i++)
{
for (j=0;j<the_arr[i].length;j++)
{the_vals[j]=(the_vals[j]?the_vals[j]+"@@@":"")+the_arr[i][j]
}
}
for (m=0;m<the_hidden.length;m++)
{the_hidden[m].value=the_vals[m]
}
}

使用方法：

add_row需要4个参数：

第一个是你在页面中预先定义的一个table就是要动态添加行的哪个table

第二个是行的内容，行的内容可以是任何东西，行的内容最外层不要写<tr></tr>因为行是函数自动生成的，只需要写<td></td>之间的内容就可以，如果需要实现多个<td></td>列，则要在行的内容里面使用<$td$>，如果动态添加行时，想实现自动编号，即每天加一个行，自动添加一个从1到N的号码，而且这个号码会自动识别改变，删除一个行的时候后面的行的这个号码也会减一的话，使用<$orderid$>函数会自动调整，例如id="tables<$orderid$>".

第三个参数是动态添加的含所使用的css，即classname

第四个参数是添加完行后，要立即执行的javascript代码，因为有可能动态添加完行后，可能需要立马执行一个js改变行内容。不需要写<script></script>

例子：

新建一个<table id="tabid">

add_row(tabid,"table border=0 cellpadding=0 cellspacing=0 width='100%' class='border' id=tables<$orderid$>>
<tr class='tdbg'><td width='150' align='right'><strong>文件名称：</strong></td><td><input type='text' name=PageFile value='' maxlength='255' size='20' ><font color=red>注意:文件名称只能使用英文</font></td><td align='right'><input type=button value=删除 onclick=del_Row(tabid,'tables');></td></tr>
<tr class='tdbg'><td width='150' align='right'><strong>中文说明：</strong></td><td colspan='2'><input type='text' name=PageName maxlength='255' size=30 value='' /></td></tr>
<tr class='tdbg'><td width='150' align='right'><strong>文件介绍：</strong></td><td colspan='2'><textarea name=PageReadme style=width:60% rows=3></textarea></td></tr>
<tr class='tdbg'><td width='150' align='right'><strong>是否启用模板：</strong></td><td colspan='2'><input type='radio' name='IsTemplate<$orderid$>' value='0' checked>不启用模板 <input type='radio' name='IsTemplate<$orderid$>' value='1'>启用模板</td></tr>
<tr class='tdbg'><td width='150' align='right'><strong>模板类型：</strong></td><td colspan='2'><input type='text' name=PageType maxlength='255' size=15 value='' /><font color='blue'>文件启用前台模板时定义有效</font></td></tr>
<tr class='tdbg'><td width='150' align='right'><strong>模板文件：</strong></td><td colspan='2'><textarea name=TemplateFiles style=width:80% rows=5></textarea><br><font color='blue'>文件启用前台模板时定义有效<br>形式：“文件名前缀|文件中文说明”<br>每个文件以回车分隔</font></td></tr>
</table>","","");

</script>

删除行：

即

del_Row(tabid,'tables');

第一个参数是动态添加行的哪个table

第二个参数是使用了自动编号的控件的ID，不需要写<$orderid$>