求自动增加行的js代码,要用到两个按钮,该如何解决
日期：2014-05-18 浏览次数：20682 次
求自动增加行的js代码,要用到两个按钮
界面上要用到两个自动增加行的按钮,请用JS实现,收到马上给分;谢谢!
注意:是一个按钮自动增加一行(一行中有input和下拉框),另外一个按钮自动增加另外一行(一行中有input和下拉框).
------解决方案--------------------
前些天正好用,在网上找了个,自己改了些东西,给你参考下.
<!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>
<style type= "text/css ">
<!--
.list_over
{
background: #8080ff;font: italic medium; color: #ffff00;
}
.list_bg1
{
background: #80ff00;
}
.list_bg2
{
background: #FF0000;
}
-->
</style>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 " />
<title> 无标题文档 </title>
<script language= "javascript ">
function addRow(){
var lastRow=filetb.rows[filetb.rows.length-1];
alert(lastRow.innerHTML);
var lr=filetb.insertRow(filetb.rows.length);
lr.innerHTML=lastRow.innerHTML;
}
/*
动态添加table.将table中的text的值存入另一text中，在后台得到另一text的值
注意：1。OnChanged将“text的值存入另一text中”。如果此事件写入后台代码，将得不到。因为被postback掉了。
故先存，再运行后台代码。
2。在html中有一table，名字为filetb。
如果需要动态修改，在table里添加literal.text.
*/
var allCount;
allCount=0;
function addAttachment() {
allCount++;
var Num,p,myrow,indexnewrow,c1,c2,c3,c4;
var rown=filetb.rows.length;
myrow=filetb.insertRow(rown);
myrow.id= "tdt "+allCount;
myrow.name= "tdt "+allCount;
var cName= "list_bg2 ";
if(rown%2==0){
cName= "list_bg1 ";
}
myrow.className=cName;
myrow.onmouseover=function(){this.className= "list_over ";};
myrow.onmouseout=function(){this.className=cName;};
c1=myrow.insertCell();
c1.width= "100 ";
c1.align= "right ";
c1.innerHTML= " <p align=right> 代码 " + (allCount) + "： ";
c2=myrow.insertCell();
c2.align= "left ";
c2.innerHTML= " <INPUT type= 'text ' onchange= 'return GetValue() ' style= 'width:150 ' class=t1 name=txtCode1 "+(allCount)+ " MaxLength= '50 ' value=\ "a "+allCount+ "\ "> ";
c3=myrow.insertCell();
c3.align= "center ";
c3.innerHTML= " <a href= 'javascript:setValue( " + allCount + "); '> 取值 </a> <a href= 'javascript:deleteRow( " + allCount + "); '> 删除 </a> ";
c4=myrow.insertCell();
c4.align= "left ";
c4.innerHTML= " <INPUT type= 'text ' onchange= 'return GetValue() ' style= 'width:150 ' class=t1 name=txtCode2 "+(allCount)+ " MaxLength= '50 ' value=\ "b "+allCount+ "\ "> ";
}
function setValue(rid){
for(i=0;i <filetb.rows.length;i++){
var curRow=filetb.rows[i];
if( 'tdt '+rid==curRow.id){
var ins=curRow.getElementsByTagName( "INPUT ");
for(j=0;j <ins.length;j++){
var curIn=ins[j];
document.getElementById( "di ").innerHTML+= "控件名称: "+curIn.name+ " <br> 值: "+curIn.value+ " <br> ";
// alert(curIn.name+ "\n "+curIn.value);
}
}
}
界面上要用到两个自动增加行的按钮,请用JS实现,收到马上给分;谢谢!
注意:是一个按钮自动增加一行(一行中有input和下拉框),另外一个按钮自动增加另外一行(一行中有input和下拉框).
------解决方案--------------------
前些天正好用,在网上找了个,自己改了些东西,给你参考下.
<!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>
<style type= "text/css ">
<!--
.list_over
{
background: #8080ff;font: italic medium; color: #ffff00;
}
.list_bg1
{
background: #80ff00;
}
.list_bg2
{
background: #FF0000;
}
-->
</style>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 " />
<title> 无标题文档 </title>
<script language= "javascript ">
function addRow(){
var lastRow=filetb.rows[filetb.rows.length-1];
alert(lastRow.innerHTML);
var lr=filetb.insertRow(filetb.rows.length);
lr.innerHTML=lastRow.innerHTML;
}
/*
动态添加table.将table中的text的值存入另一text中，在后台得到另一text的值
注意：1。OnChanged将“text的值存入另一text中”。如果此事件写入后台代码，将得不到。因为被postback掉了。
故先存，再运行后台代码。
2。在html中有一table，名字为filetb。
如果需要动态修改，在table里添加literal.text.
*/
var allCount;
allCount=0;
function addAttachment() {
allCount++;
var Num,p,myrow,indexnewrow,c1,c2,c3,c4;
var rown=filetb.rows.length;
myrow=filetb.insertRow(rown);
myrow.id= "tdt "+allCount;
myrow.name= "tdt "+allCount;
var cName= "list_bg2 ";
if(rown%2==0){
cName= "list_bg1 ";
}
myrow.className=cName;
myrow.onmouseover=function(){this.className= "list_over ";};
myrow.onmouseout=function(){this.className=cName;};
c1=myrow.insertCell();
c1.width= "100 ";
c1.align= "right ";
c1.innerHTML= " <p align=right> 代码 " + (allCount) + "： ";
c2=myrow.insertCell();
c2.align= "left ";
c2.innerHTML= " <INPUT type= 'text ' onchange= 'return GetValue() ' style= 'width:150 ' class=t1 name=txtCode1 "+(allCount)+ " MaxLength= '50 ' value=\ "a "+allCount+ "\ "> ";
c3=myrow.insertCell();
c3.align= "center ";
c3.innerHTML= " <a href= 'javascript:setValue( " + allCount + "); '> 取值 </a> <a href= 'javascript:deleteRow( " + allCount + "); '> 删除 </a> ";
c4=myrow.insertCell();
c4.align= "left ";
c4.innerHTML= " <INPUT type= 'text ' onchange= 'return GetValue() ' style= 'width:150 ' class=t1 name=txtCode2 "+(allCount)+ " MaxLength= '50 ' value=\ "b "+allCount+ "\ "> ";
}
function setValue(rid){
for(i=0;i <filetb.rows.length;i++){
var curRow=filetb.rows[i];
if( 'tdt '+rid==curRow.id){
var ins=curRow.getElementsByTagName( "INPUT ");
for(j=0;j <ins.length;j++){
var curIn=ins[j];
document.getElementById( "di ").innerHTML+= "控件名称: "+curIn.name+ " <br> 值: "+curIn.value+ " <br> ";
// alert(curIn.name+ "\n "+curIn.value);
}
}
}
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
