点击按钮自动增加行,行里有文本框,并把里面的值写到数据库,该怎么解决

2012-02-07

点击按钮自动增加行,行里有文本框,并把里面的值写到数据库!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transi

点击按钮自动增加行,行里有文本框,并把里面的值写到数据库
<!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>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 " />
<title> 无标题文档 </title>
</head>

<body>
<script>
i=1;
function addrow()
{
i++;
str=document.all.mytable.outerHTML;
str=str.substring(0,str.length-16);
str+= ' <tr> <td> <input type= "text " name= "text '+i+ ' " value= "text '+i+ ' " size= "21 "> </td> </tr> </tbody> </table> ';
document.all.mytable.outerHTML=str;

}
function sum()
{

}
</script>
<form>
<table id=mytable>
<tr>
<td>
<input type= "text " name= "text1 " size= "21 ">
</td>
</tr>
</table>
<input type=button value= "增加 " onclick=addrow()>
<input type=button value= "累计 " onclick=sum()>
<input type= "text " name= "sumtext " value= " " size= "21 ">
</form>
</body>
</html>
.....................................................................
想先实现,把文本框里面的值加到文本框sumtext中.
要是用vbscript来写,把他们的值写到数据库里,那么javascript里定义的变量i怎么用到.

[解决办法]
<!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>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 " />
<title> 无标题文档 </title>
</head>

<body>
<script>
function addrow()
{
document.getElementById( "ii ").value++;
var i=document.getElementById( "ii ").value;
str=document.all.mytable.outerHTML;

str=str.substring(0,str.length-16);
str+= ' <tr> <td> <input type= "text " name= "text '+i+ ' " value= " '+i+ ' " size= "21 "> </td> </tr> </tbody> </table> ';
document.all.mytable.outerHTML=str;

}
function sum()
{
var tmp=0;
for (var j=1;j <=document.getElementById( "ii ").value;j++) {
tmp+=parseInt(document.getElementById( "text "+j).value);
}
document.all.sumtext.value=tmp;
}
</script>
<form>
<table id=mytable>
<tr>
<td>
<input type= "text " name= "text1 " value= "1 " size= "21 ">
</td>
</tr>
</table>
<input type=button value= "增加 " onclick=addrow()>
<input type=button value= "累计 " onclick=sum()>
<input type= "hidden " name= "ii " id= "ii " value= "1 " onclick=sum()>
<input type= "text " id= "sumtext " name= "sumtext " value= " " size= "21 ">
</form>
</body>
</html>
[解决办法]
参考，JK的代码：
<html>

<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 ">
<title> JK:支持民族工业,尽量少买X货 </title>

<style>
TD,INPUT{font-size:12;}
</style>
</head>

<body bgcolor=EEEEEE>
<div style= "font-size:10pt; ">
注1：把添加新行的内容放在tbDetailPrepare里，会有一些好处（可读性好点，动态设置新行的默认值方便点。。。） <br/>
注2：存盘失败后返回本页，在FireFox下上次输入的值会丢失 <br/>
注3：只支持input里的上下键移光标，左右键请用tab/shift+tab（本功能在FireFox1.5.0.8下有bug）。 <br/>

<br/>
注：本页面仅在IE6/FireFox1.5下测试过。其它浏览器或其它版本未经测试。 <br/>
注-----：作者JK： <a href= "mailTo:jk_10000@yahoo.com.cn?subject=About%20RowAddAndDelete "> JK_10000@yahoo.com.cn </a> <br/>
<hr/>
</div>

<form name= "frm " action= "http://www.google.com " method=post >
<h4 align=center> JK的动态明细示例 </h4>

<table align= "center " bordercolor=cccccc border=1 width=100% >
<tr>
<td align=right >
<input type= "button " value= "增加 " class= "bottom " onclick= "addDetailProcess(); ">  
<input type= "button " value= "删除 " class= "bottom " onclick= "delDetailProcess(); ">  
<input type= "button " value= "完成 " class= "bottom " onclick= "submitProcess(); ">

</td>
</tr>
</table>
<div width=100% id=detailTableContainer onkeydown= "keyDownAndUpControl(event); ">
<table align= "center " bordercolor=cccccc border=1 width=100% >
<tr bgcolor=eeeeee id= "detailHeaderTr ">
<td > <input type=checkbox onclick= "selectallcheckbox(this) "> </td>
<td > 明细ID* </td>

<td > 明细NAME </td>
</tr>
<tbody id= "detailTbody " >
<tr>
<td > <input type= "checkbox " name= "record_select " > </td>
<td > <input type= "text " name= "detail_id " value= ' ' > </td>
<td > <input type= "text " name= "detail_name " value= ' ' > </td>
</tr>
</tbody>
<tr height=0 > <td colspan=100 height=0 > 合计 </td> </tr>

</table>
</div>

</form>


<table id= "tbDetailPrepare " style= "display:none ">
<tr>
<td > <input type= "checkbox " name= "record_select " > </td>
<td > <input type= "text " name= "detail_id " value= ' ' > </td>
<td > <input type= "text " name= "detail_name " value= ' ' > </td>
</tr>
</table>

<textarea id= "theHistoryRecord " value= " " style= "display:none; " rows= "1 " cols= "20 "> </textarea>
</body>

</html>

<script language=javascript>

window.onload = historyOncemore;//Only for IE
window.onbeforeunload = fixHistory;//Only for IE

function fixHistory()//记住历史
{
document.getElementById( "theHistoryRecord ").value=document.getElementById( "detailTableContainer ").innerHTML;
}

function historyOncemore()//恢复历史
{
if (document.getElementById( "theHistoryRecord ").value!= " ")
{
document.getElementById( "detailTableContainer ").innerHTML=document.getElementById( "theHistoryRecord ").value;
}
}

function selectallcheckbox(obj)//全选或全不选
{
var checkboxObjs=document.getElementsByName( "record_select ");
var tureorfalse=obj.checked;
for(var i=0;i <checkboxObjs.length-1;i++)
{
checkboxObjs[i].checked=tureorfalse;
}
}

function addDetailProcess()//增加明细
{
document.getElementById( "detailTbody ").appendChild(document.getElementById( "tbDetailPrepare ").rows[0].cloneNode(true))

}

function delDetailProcess()//删除明细
{
if (confirm( "确定选择正确并且要将这些明细删除 ")==false) return false;
var checkboxObjs=document.getElementsByName( "record_select ");
for(var i=checkboxObjs.length-2;i> =0;i--)
{
if (checkboxObjs[i].checked)
{
var tempTr=checkboxObjs[i].parentNode.parentNode;
tempTr.parentNode.removeChild(tempTr);
}
}
}

function keyDownAndUpControl(event) // 用于控制明细里的上下键。只控制input
{
var obj=event.srcElement||event.target;
var k=event.keyCode;
if (obj.tagName!= "INPUT "||obj.name== " ") return true;
if( k != 38 && k != 40 ) return true;
var theSamenameInputs=document.getElementsByName(obj.name);
var i=0;
for (i=0;i <theSamenameInputs.length;i++)
{
if(theSamenameInputs[i]==obj)break;
}
if((i> 0)&&(k==38))
{
theSamenameInputs[i-1].select();//There will be error in FireFox1.5
theSamenameInputs[i-1].focus();
event.returnValue=false;
return false;
}

if((i <theSamenameInputs.length-2)&&(k==40))
{
theSamenameInputs[i+1].select();//There will be error in FireFox1.5
theSamenameInputs[i+1].focus();
event.returnValue=false;
return false;
}
}

function submitProcess()
{
document.frm.submit();
}

</script>

热点排行

ASP

点击按钮自动增加行,行里有文本框,并把里面的值写到数据库,该怎么解决