您的位置：首页 > 其它

动态添加数据，批量提交保存

2010-06-22 11:33 393 查看

<html>

<head><title>动态添加数据，批量提交保存</title></head>

<script type="text/javascript">
//增加数据

function addData(){

var tableObj=document.getElementById("addTab");

var newRowObj=tableObj.insertRow(tableObj.rows.length);

var loadModeName=newRowObj.insertCell(newRowObj.cells.length);

var loadModePrice=newRowObj.insertCell(newRowObj.cells.length);

var del=newRowObj.insertCell(newRowObj.cells.length);

loadModeName.innerHTML='<input name="workTeamCode" readonly maxlength="2"/>'

loadModePrice.innerHTML='<input name="workTeamName" readonly="readonly" maxlength="5" onblur="lostblur(this)"/>'

del.innerHTML='<input type="button" align="center" name="update" value="修改" onclick="updateRow()">'

var arrObj=document.all.workTeamCode;

//当数组的长度为0时候执行

if("undefined"==typeof arrObj){

addDataValue(1);

}

//当数组的长度为1的时候执行

else if("undefined"==typeof arrObj.length){

addDataValue(2);

}else{

addDataValue(3);

}

delAdd();

}
//把录入table的值放到文本框显示

function addDataValue(obj){

//当数组的长度为1时候执行

if(obj<2)

{

var h=document.all.code;

var s=document.getElementById("workTeamCode");

s.value=h.value;

arrObj=document.all.name;

woodadd=document.getElementById("workTeamName");

woodadd.value=arrObj.value;

}else

//当数组的长度大于2时候执行

{

var h=document.getElementById("code");

var s=document.getElementsByName("workTeamCode");

s[s.length-1].value=h.value;

arrObj=document.getElementById("name");

woodadd=document.getElementsByName("workTeamName");

woodadd[woodadd.length-1].value=arrObj.value;

}

}
//还原文本框内容

function delAdd(){

document.getElementById("code").value="";

document.getElementById("name").value="";

}
//修改指定的行数据

function updateData(obj){

obj.readOnly=false;

obj.focus();

}

// 修改指定的行

function updateRow(){

var arrObj = document.all.update;

var loadModeNamet = document.getElementsByName("workTeamCode");

var loadModePricet= document.all.workTeamName;

var srcObj = event.srcElement;

//当数组的长度为1的时候执行

if("undefined"==typeof arrObj.length){

loadModePricet.readOnly=false;

loadModePricet.style.backgroundColor="#00FFFF";

}else{

for(var i=0; i<arrObj.length; i++)

{

if(srcObj == arrObj[i])

{

loadModePricet[i].style.backgroundColor="#00FFFF";

loadModePricet[i].readOnly=false;

updateData(arrObj[i]);

}

}

}

}

//当文本框焦点丢失后触发的事件

function lostblur(obj){

if(obj.readOnly==false){

var arrObj=obj;

//此处可以调用Trim过滤掉空格如：var str= Trim(arrObj.value);

var str= arrObj.value;

if(str==""){

alert("此处不允许为空");

obj.value="";

arrObj.focus();

return;

}else {

arrObj.readOnly=true;

arrObj.style.backgroundColor="#FFFFFF";

}

}

}
</script>

<body>

<form name="form1" action="#" method="post">

<table width="350" cellpadding="2" cellspacing="1" align="center">

<tr>

<td align="center">

代码：

</td>

<td align="center" >

<input type="text" name="code" size="2" maxlength="2" />

</td>

<td align="center">

名称：

</td>

<td align="center">

<input type="text" name="name" size="10" maxlength="5" />

</td>

<td align="center">

<input name="addButton" type="button" value="增加">

</td>

</tr>

</table>

<hr/>

<table border="1" id="addTab" width="350" cellpadding="2" cellspacing="1" align="center">

<tr>

<td align="center">

代码

</td>

<td align="center">

名称

</td>

<td align="center">

操作

</td>

</tr>

</table>

<div align="center"><input name="addSubmit" type="button" value="保存"></div>

</form>

</body>

</html>本文出自 “紫晶幻治” 博客，转载请与作者联系！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航