一个可动态编辑多条数据的JS
2005-12-23 13:37
323 查看
<!--
/**
* 增加一行数据
*/
function dataGridAdd(templet, dataGrid, rowCountHolder, rowName, colArray)
{
var ListSumEx = rowCountHolder.value;
ListSumEx++;
var temp = dataGrid;
temp.insertRow(temp.rows.length);
temp.rows[temp.rows.length -1].insertCell(0);
var sHTML;
sHTML=templet.innerHTML;
sHTML=Replace(sHTML,rowName + "0",rowName+ListSumEx);//行数据表名称ListTbEx
if(ListSumEx%2 == 0){//交替颜色设置
sHTML=Replace(sHTML,"list-tr1","list-tr2");
}
else{
sHTML=Replace(sHTML,"list-tr2","list-tr1");
}
//替换没一列
for(var c = 0; c < colArray.length; c++) {
sHTML=Replace(sHTML,colArray[c] + "0",colArray[c]+ListSumEx);
}
temp.rows[temp.rows.length-1].cells[0].innerHTML=sHTML;
rowCountHolder.value = ListSumEx;
}
/**
* 删除一行数据
*/
function dataGridDelete(deltRow, dataGrid, rowCountHolder, rowName, colArray)
{
var sHTML;
var temp = dataGrid;
if (rowCountHolder.value<1)
{
return;
}
var fix = 0;
for (var j=0;j<temp.rows.length;j++)
{
var chdID = getChlidID(temp.rows[j]);
if(chdID == null || chdID =="") {
fix++;//不是要检查的
} else if (chdID==deltRow){
for (var a=j+1;a<temp.rows.length;a++){
sHTML=temp.rows[a].cells[0].innerHTML;
sHTML=Replace(sHTML,rowName+(a - fix),rowName+(a - (1 + fix)));
if(sHTML.indexOf("list-tr1")!=-1){
sHTML=Replace(sHTML,"list-tr1","list-tr2");
} else{
sHTML=Replace(sHTML,"list-tr2","list-tr1");
}
//替换每一列
for(var c = 0; c < colArray.length; c++) {
sHTML=Replace(sHTML,colArray[c]+(a - fix),colArray[c]+(a - (1 + fix)));
}
temp.rows[a].cells[0].innerHTML=sHTML;
}
temp.deleteRow(j);
}
}
rowCountHolder.value = rowCountHolder.value-1;
}
/**
* 字符串替换
* Sstring innerHTML对象
* Cstring 被替换的字符串
* Dstring 目的字符串
*/
function Replace(Sstring,Cstring,Dstring)
{
var blength=Cstring.length;
var firstbyte=Sstring.indexOf(Cstring,0);
for (var i=0;i<=Sstring.length-blength;i++)
{
tstring=Sstring.substring(i,i+blength);
if (tstring==Cstring)
{
Sstring=Sstring.substring(0,i)+Dstring+Sstring.substring(i+blength,Sstring.length);
}
}
return Sstring;
}
/**
* 获取子节点的id
*/
function getChlidID(par) {
var chd = par.cells[0].childNodes;
for(var i=0; i<chd.length; i++){
if(chd[i].tagName=='TABLE'){
return chd[i].id;
}
}
}
-->
VLanConfig.jsp
<%@page contentType="text/html; charset=UTF-8"%>
<%@page import="java.util.*,com.cnunisoft.uma.tableobject.v_cfgchghist,com.cnunisoft.uma.action.ParameterTools,java.text.*"%>
<%@taglib uri="/WEB-INF/struts-html.tld" prefix="html"%>
<%@taglib uri="/WEB-INF/struts-bean.tld" prefix="bean"%>
<%@taglib uri="/WEB-INF/struts-logic.tld" prefix="logic"%>
<html>
<head>
<link href="../Resource/style/style1.css" _fcksavedurl=""../Resource/style/style1.css"" _fcksavedurl=""../Resource/style/style1.css"" rel="stylesheet" type="text/css">
<script type="text/javascript" language="javascript" src="../Resource/Js/DataGridEdit.js"></script>
<title>VLAN管理</title>
</head>
<body class="body">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="1">
<tr>
<%@include file="../includeLeft.jsp"%>
<td valign="top" class="ob-bc">
<table width="100%" border="0" cellpadding="2" cellspacing="1" class="form-table">
<tr align="center" valign="top">
<td class="tab-head">
<table width="100%" height="100%" cellpadding="0" cellspacing="0">
<tr class="text-title">
<td class="text-title" width="60%" colspan="6" valign="top"><div align="left">VLAN配置</div></td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr align="center" valign="top" class="list-tr1">
<td width="35%" align="right">
VLAN号</td>
<td width="65%" align="left">
<input type="text" name="ip"></td>
</tr>
<tr align="center" valign="top" class="list-tr2">
<td width="35%" align="right">
描述</td>
<td width="65%" align="left">
<textarea name="desc">
</textarea>
</td>
</tr>
<tr align="center">
<td colspan="2">
<table width="100%" height="100%" cellpadding="0" cellspacing="1" bgcolor="#FFFFFF">
<!--交换机信息 开始-->
<tr align="center" class="tab-title1">
<td class="tab-head"><table width="100%" height="100%" cellpadding="0" cellspacing="0">
<tr class="text-title">
<td class="text-title" width="60%" colspan="6" valign="top"><div align="left">交换机</div></td>
</tr>
</table></td>
</tr>
<tr class="list-tr1">
<td>
<table width="100%" id="dataGrid1" height="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<table align="center" class="tab-title" width="100%">
<tr align="center">
<td width="80%" class=tab-title>网络交换机</td>
<td width="20%" class=tab-title>删除</td>
</tr>
</table>
</td>
</tr>
<tr style="display:none">
<td id="ListItem">
<table align="center" id="ListTb0" class="dg-tr">
<tr class="list-tr1">
<td width="80%" align="center" style="border-right:1px solid;">
<select name="switch0">
<option value="1">192.168.1.254</option>
<option value="2">UDP</option>
</select>
</td>
<td width="20%" align="Center">
<a href="#" _fcksavedurl=""#"" onClick="if(confirm('是否确定删除?')){dataGridDelete('ListTb0', document.all.dataGrid1, document.all.switchnum, 'ListTb', new Array('switch'));}else{return false;}"> <img src="../Resource/Images/deleteicon.gif" border="0" width="13" height="17" alt="删除"></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr align="center" class="tab-foot">
<td colspan="5"><input name="addswitch" type="button" class="button" value="增加交换机" OnClick="dataGridAdd(ListItem, document.all.dataGrid1, document.all.switchnum, 'ListTb', new Array('switch'))">
</td>
</tr>
<tr align="center" class="list-tr1">
<td colspan="5">
</td>
</tr>
<!--交换机信息 结束-->
<!--部门信息 开始-->
<tr align="center" class="tab-title1">
<td class="tab-head"><table width="100%" height="100%" cellpadding="0" cellspacing="0">
<tr class="text-title">
<td class="text-title" width="60%" colspan="6" valign="top"><div align="left">部门</div></td>
</tr>
</table></td>
</tr>
<tr class="list-tr1">
<td>
<table width="100%" id="dataGrid2" height="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<table align="center" class="tab-title" width="100%">
<tr align="center">
<td width="80%" class=tab-title>部门</td>
<td width="20%" class=tab-title>删除</td>
</tr>
</table>
</td>
</tr>
<tr style="display:none">
<td id="DepItem">
<table align="center" id="DepTb0" class="dg-tr">
<tr class="list-tr1">
<td width="80%" align="center" style="border-right:1px solid;">
<select name="dep0">
<option value="1">部门一</option>
<option value="2">部门二</option>
</select>
</td>
<td width="20%" align="Center">
<a href="#" onClick="if(confirm('是否确定删除?')){dataGridDelete('DepTb0', document.all.dataGrid2, document.all.depnum, 'DepTb', new Array('dep'));}else{return false;}"> <img src="../Resource/Images/deleteicon.gif" border="0" width="13" height="17" alt="删除"></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr align="center" class="tab-foot">
<td colspan="5">
<input name="adddep" type="button" class="button" value="增加部门" onClick="dataGridAdd(DepItem, document.all.dataGrid2, document.all.depnum, 'DepTb', new Array('dep'))">
</td>
</tr>
<tr align="center" class="list-tr1">
<td colspan="5">
</td>
</tr>
<!--部门信息 结束-->
<!--用户信息 开始-->
<tr align="center" class="tab-title1">
<td class="tab-head">
<table width="100%" height="100%" cellpadding="0" cellspacing="0">
<tr class="text-title">
<td class="text-title" width="60%" colspan="6" valign="top"><div align="left">用户</div></td>
</tr>
</table>
</td>
</tr>
<tr class="list-tr1">
<td>
<table width="100%" id="dataGrid3" height="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<table align="center" class="tab-title" width="100%">
<tr align="center">
<td width="80%" class=tab-title>用户</td>
<td width="20%" class=tab-title>删除</td>
</tr>
</table>
</td>
</tr>
<tr style="display:none">
<td id="UserItem">
<table align="center" id="UserTb0" class="dg-tr">
<tr class="list-tr1">
<td width="80%" align="center" style="border-right:1px solid;">
<select name="user0">
<option value="1">卖要良</option>
<option value="2">张一隆</option>
</select>
</td>
<td width="20%" align="Center">
<a href="#" onClick="if(confirm('是否确定删除?')){dataGridDelete('UserTb0', document.all.dataGrid3, document.all.usernum, 'UserTb', new Array('user'));}else{return false;}"> <img src="../Resource/Images/deleteicon.gif" border="0" width="13" height="17" alt="删除"></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr align="center" class="tab-foot">
<td colspan="5">
<input name="adduser" type="button" class="button" value="增加用户" onClick="dataGridAdd(UserItem, document.all.dataGrid3, document.all.usernum, 'UserTb', new Array('user'))">
</td>
</tr>
<!--用户信息 结束-->
<tr align="center" class="tab-foot">
<td colspan="5">
<input type="hidden" name="switchnum" value="0">
<input type="hidden" name="depnum" value="0">
<input type="hidden" name="usernum" value="0">
<input name="save" type="button" class="button" value="保 存">
<input name="ret" type="button" class="button" value="返 回">
</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td height="30" colspan="3" class="copy" valign="bottom"><%@include file="../copyRight.inc"%>
</td>
</tr>
</table>
</body>
</html>
/**
* 增加一行数据
*/
function dataGridAdd(templet, dataGrid, rowCountHolder, rowName, colArray)
{
var ListSumEx = rowCountHolder.value;
ListSumEx++;
var temp = dataGrid;
temp.insertRow(temp.rows.length);
temp.rows[temp.rows.length -1].insertCell(0);
var sHTML;
sHTML=templet.innerHTML;
sHTML=Replace(sHTML,rowName + "0",rowName+ListSumEx);//行数据表名称ListTbEx
if(ListSumEx%2 == 0){//交替颜色设置
sHTML=Replace(sHTML,"list-tr1","list-tr2");
}
else{
sHTML=Replace(sHTML,"list-tr2","list-tr1");
}
//替换没一列
for(var c = 0; c < colArray.length; c++) {
sHTML=Replace(sHTML,colArray[c] + "0",colArray[c]+ListSumEx);
}
temp.rows[temp.rows.length-1].cells[0].innerHTML=sHTML;
rowCountHolder.value = ListSumEx;
}
/**
* 删除一行数据
*/
function dataGridDelete(deltRow, dataGrid, rowCountHolder, rowName, colArray)
{
var sHTML;
var temp = dataGrid;
if (rowCountHolder.value<1)
{
return;
}
var fix = 0;
for (var j=0;j<temp.rows.length;j++)
{
var chdID = getChlidID(temp.rows[j]);
if(chdID == null || chdID =="") {
fix++;//不是要检查的
} else if (chdID==deltRow){
for (var a=j+1;a<temp.rows.length;a++){
sHTML=temp.rows[a].cells[0].innerHTML;
sHTML=Replace(sHTML,rowName+(a - fix),rowName+(a - (1 + fix)));
if(sHTML.indexOf("list-tr1")!=-1){
sHTML=Replace(sHTML,"list-tr1","list-tr2");
} else{
sHTML=Replace(sHTML,"list-tr2","list-tr1");
}
//替换每一列
for(var c = 0; c < colArray.length; c++) {
sHTML=Replace(sHTML,colArray[c]+(a - fix),colArray[c]+(a - (1 + fix)));
}
temp.rows[a].cells[0].innerHTML=sHTML;
}
temp.deleteRow(j);
}
}
rowCountHolder.value = rowCountHolder.value-1;
}
/**
* 字符串替换
* Sstring innerHTML对象
* Cstring 被替换的字符串
* Dstring 目的字符串
*/
function Replace(Sstring,Cstring,Dstring)
{
var blength=Cstring.length;
var firstbyte=Sstring.indexOf(Cstring,0);
for (var i=0;i<=Sstring.length-blength;i++)
{
tstring=Sstring.substring(i,i+blength);
if (tstring==Cstring)
{
Sstring=Sstring.substring(0,i)+Dstring+Sstring.substring(i+blength,Sstring.length);
}
}
return Sstring;
}
/**
* 获取子节点的id
*/
function getChlidID(par) {
var chd = par.cells[0].childNodes;
for(var i=0; i<chd.length; i++){
if(chd[i].tagName=='TABLE'){
return chd[i].id;
}
}
}
-->
VLanConfig.jsp
<%@page contentType="text/html; charset=UTF-8"%>
<%@page import="java.util.*,com.cnunisoft.uma.tableobject.v_cfgchghist,com.cnunisoft.uma.action.ParameterTools,java.text.*"%>
<%@taglib uri="/WEB-INF/struts-html.tld" prefix="html"%>
<%@taglib uri="/WEB-INF/struts-bean.tld" prefix="bean"%>
<%@taglib uri="/WEB-INF/struts-logic.tld" prefix="logic"%>
<html>
<head>
<link href="../Resource/style/style1.css" _fcksavedurl=""../Resource/style/style1.css"" _fcksavedurl=""../Resource/style/style1.css"" rel="stylesheet" type="text/css">
<script type="text/javascript" language="javascript" src="../Resource/Js/DataGridEdit.js"></script>
<title>VLAN管理</title>
</head>
<body class="body">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="1">
<tr>
<%@include file="../includeLeft.jsp"%>
<td valign="top" class="ob-bc">
<table width="100%" border="0" cellpadding="2" cellspacing="1" class="form-table">
<tr align="center" valign="top">
<td class="tab-head">
<table width="100%" height="100%" cellpadding="0" cellspacing="0">
<tr class="text-title">
<td class="text-title" width="60%" colspan="6" valign="top"><div align="left">VLAN配置</div></td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr align="center" valign="top" class="list-tr1">
<td width="35%" align="right">
VLAN号</td>
<td width="65%" align="left">
<input type="text" name="ip"></td>
</tr>
<tr align="center" valign="top" class="list-tr2">
<td width="35%" align="right">
描述</td>
<td width="65%" align="left">
<textarea name="desc">
</textarea>
</td>
</tr>
<tr align="center">
<td colspan="2">
<table width="100%" height="100%" cellpadding="0" cellspacing="1" bgcolor="#FFFFFF">
<!--交换机信息 开始-->
<tr align="center" class="tab-title1">
<td class="tab-head"><table width="100%" height="100%" cellpadding="0" cellspacing="0">
<tr class="text-title">
<td class="text-title" width="60%" colspan="6" valign="top"><div align="left">交换机</div></td>
</tr>
</table></td>
</tr>
<tr class="list-tr1">
<td>
<table width="100%" id="dataGrid1" height="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<table align="center" class="tab-title" width="100%">
<tr align="center">
<td width="80%" class=tab-title>网络交换机</td>
<td width="20%" class=tab-title>删除</td>
</tr>
</table>
</td>
</tr>
<tr style="display:none">
<td id="ListItem">
<table align="center" id="ListTb0" class="dg-tr">
<tr class="list-tr1">
<td width="80%" align="center" style="border-right:1px solid;">
<select name="switch0">
<option value="1">192.168.1.254</option>
<option value="2">UDP</option>
</select>
</td>
<td width="20%" align="Center">
<a href="#" _fcksavedurl=""#"" onClick="if(confirm('是否确定删除?')){dataGridDelete('ListTb0', document.all.dataGrid1, document.all.switchnum, 'ListTb', new Array('switch'));}else{return false;}"> <img src="../Resource/Images/deleteicon.gif" border="0" width="13" height="17" alt="删除"></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr align="center" class="tab-foot">
<td colspan="5"><input name="addswitch" type="button" class="button" value="增加交换机" OnClick="dataGridAdd(ListItem, document.all.dataGrid1, document.all.switchnum, 'ListTb', new Array('switch'))">
</td>
</tr>
<tr align="center" class="list-tr1">
<td colspan="5">
</td>
</tr>
<!--交换机信息 结束-->
<!--部门信息 开始-->
<tr align="center" class="tab-title1">
<td class="tab-head"><table width="100%" height="100%" cellpadding="0" cellspacing="0">
<tr class="text-title">
<td class="text-title" width="60%" colspan="6" valign="top"><div align="left">部门</div></td>
</tr>
</table></td>
</tr>
<tr class="list-tr1">
<td>
<table width="100%" id="dataGrid2" height="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<table align="center" class="tab-title" width="100%">
<tr align="center">
<td width="80%" class=tab-title>部门</td>
<td width="20%" class=tab-title>删除</td>
</tr>
</table>
</td>
</tr>
<tr style="display:none">
<td id="DepItem">
<table align="center" id="DepTb0" class="dg-tr">
<tr class="list-tr1">
<td width="80%" align="center" style="border-right:1px solid;">
<select name="dep0">
<option value="1">部门一</option>
<option value="2">部门二</option>
</select>
</td>
<td width="20%" align="Center">
<a href="#" onClick="if(confirm('是否确定删除?')){dataGridDelete('DepTb0', document.all.dataGrid2, document.all.depnum, 'DepTb', new Array('dep'));}else{return false;}"> <img src="../Resource/Images/deleteicon.gif" border="0" width="13" height="17" alt="删除"></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr align="center" class="tab-foot">
<td colspan="5">
<input name="adddep" type="button" class="button" value="增加部门" onClick="dataGridAdd(DepItem, document.all.dataGrid2, document.all.depnum, 'DepTb', new Array('dep'))">
</td>
</tr>
<tr align="center" class="list-tr1">
<td colspan="5">
</td>
</tr>
<!--部门信息 结束-->
<!--用户信息 开始-->
<tr align="center" class="tab-title1">
<td class="tab-head">
<table width="100%" height="100%" cellpadding="0" cellspacing="0">
<tr class="text-title">
<td class="text-title" width="60%" colspan="6" valign="top"><div align="left">用户</div></td>
</tr>
</table>
</td>
</tr>
<tr class="list-tr1">
<td>
<table width="100%" id="dataGrid3" height="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<table align="center" class="tab-title" width="100%">
<tr align="center">
<td width="80%" class=tab-title>用户</td>
<td width="20%" class=tab-title>删除</td>
</tr>
</table>
</td>
</tr>
<tr style="display:none">
<td id="UserItem">
<table align="center" id="UserTb0" class="dg-tr">
<tr class="list-tr1">
<td width="80%" align="center" style="border-right:1px solid;">
<select name="user0">
<option value="1">卖要良</option>
<option value="2">张一隆</option>
</select>
</td>
<td width="20%" align="Center">
<a href="#" onClick="if(confirm('是否确定删除?')){dataGridDelete('UserTb0', document.all.dataGrid3, document.all.usernum, 'UserTb', new Array('user'));}else{return false;}"> <img src="../Resource/Images/deleteicon.gif" border="0" width="13" height="17" alt="删除"></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr align="center" class="tab-foot">
<td colspan="5">
<input name="adduser" type="button" class="button" value="增加用户" onClick="dataGridAdd(UserItem, document.all.dataGrid3, document.all.usernum, 'UserTb', new Array('user'))">
</td>
</tr>
<!--用户信息 结束-->
<tr align="center" class="tab-foot">
<td colspan="5">
<input type="hidden" name="switchnum" value="0">
<input type="hidden" name="depnum" value="0">
<input type="hidden" name="usernum" value="0">
<input name="save" type="button" class="button" value="保 存">
<input name="ret" type="button" class="button" value="返 回">
</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td height="30" colspan="3" class="copy" valign="bottom"><%@include file="../copyRight.inc"%>
</td>
</tr>
</table>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- GridView中 对数据编辑打开一个新页面 & 动态添加控件并获取其值
- Scrapy 加载动态数据（js、ajax）
- Python 爬虫 PhantomJs 获取JS动态数据
- js调用php动态数据
- JS小功能(操作Table--动态添加删除表格及数据)实现代码
- springmvc+spring+mybatis+jquery+js动态读取省市区数据
- 根据后台接口获取动态数据，使用JS拼接html
- js 动态添加一个 节点（或控件）
- 如何抓取Js动态生成数据且以滚动页面方式分页的网页
- JS实现动态生成表格并提交表格数据向后端
- delphi中将一个ADOQuery查询的数据结果传递给一个动态生成的ADOQuery
- 【Javascript】Js动态生成checkbox(使用Json数据)
- 利用js读取动态网站从服务器端返回的数据
- 【PB】如何创建一个动态的数据窗口对象?
- sql存储过程实例--动态根据表数据复制一个表的数据到另一个表
- JS-利用ajax获取json数据，并传入页面生成动态tab
- JS动态添加表行，并验证数据，获取数据。
- 一个 android和js 数据交互的问题
- 【前端js】实现一个函数可以对JavaScript中的5种主要数据类型进行赋值
- 【动态生成表格】ajax成功返回后，使用js，取到数据动态生成表格2017