点击添加自动添加一行，点击删除自动删除当前行。

最新推荐文章于 2024-03-18 23:36:24 发布

li243306411

最新推荐文章于 2024-03-18 23:36:24 发布

阅读量4.7k

点赞数

本文链接：https://blog.csdn.net/li243306411/article/details/45822151

版权

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>数据库表管理-数据库表编辑</title>
<%@ include file="../../common/pubInclude.jsp"%>
<link rel="stylesheet" href="<%=base%>/css/fileuploadstyles.css">
<link rel="stylesheet" href="<%=base%>/css/bootstrap-datetimepicker.min.css" media="screen">
<script type="text/javascript" src="<%=base%>/js/createdom.js"></script>
<script type="text/javascript" src="<%=base%>/js/jquery.Jcrop.min.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
//JQUERY执行方法
$().ready(function() {
//提交按钮事件
$(".sub").click(function(){
//验证输入内容不能全为空
if(!returnValidateNull()){
return false;
}
});

$('#addTable').click(function(){
var tr="<tr class=\"data\">"+
"<td>"+
"<input type=\"text\" name=\"\" placeholder=\"字段名称\" value=\"\" /><font color=\"red\"> *</font>"+
"</td>"+
"<td>"+
"<select class=\"form-control\" id=\"columntype\" name=\"\">"+
"<option value=\"NULL\" ${(columntype=='NULL')?'selected=\"selected\"':'' }>NULL</option>"+
"<option value=\"INTEGER\" ${(columntype=='INTEGER')?'selected=\"selected\"':'' }>INTEGER</option>"+
"<option value=\"REAL\" ${(columntype=='REAL')?'selected=\"selected\"':'' }>REAL</option>"+
"<option value=\"TEXT\" ${(columntype=='TEXT')?'selected=\"selected\"':'' }>TEXT</option>"+
"<option value=\"BLOB\" ${(columntype=='BLOB')?'selected=\"selected\"':'' }>BLOB</option>"+
"</select>"+
"</td>"+
"<td>"+
"<input type=\"text\" name=\"\" placeholder=\"字段长度\" value=\"\" />"+
"</td>"+
"<td>"+
"<input type=\"checkbox\" id=\"nullable\" name=\"\" checked=\"checked\">可为空"+
"</td>"+
"<td>"+
"<input type=\"text\" name=\"\" placeholder=\"默认值\" value=\"\" />"+
"</td>"+
"<td>"+
"<select class=\"form-control\" id=\"indexInfo\" name=\"\">"+
"<option value=\"\" ${(columntype=='')?'selected=\"selected\"':'' }></option>"+
"<option value=\"Primary Key\" ${(columntype=='Primary Key')?'selected=\"selected\"':'' }>Primary Key</option>"+
"<option value=\"Primary Key\" ${(columntype=='Foreign Key')?'selected=\"selected\"':'' }>Foreign Key</option>"+
"</select>"+
"</td>"+
"<td>"+
"<input type=\"text\" name=\"\" placeholder=\"中文名称\" value=\"\" />"+
"</td>"+
"<td>"+
"<input type=\"button\" name=\"button\" value=\"删除\" id=\"deleteTable\" οnclick=\"delTableRow(this)\"/>"+
"</td>"+
"</tr>";
　 $('#table').append(tr);　
});

/*
$('#deleteTable').click(function(){
var check = document.getElementsByName("button");
for(var i=0;i<check.length;i++){
if(check[i].checked){
document.getElementById('table').deleteRow(i);
i--;
}
}
});
*/
});

function delTableRow(obj){
var row = obj.parentNode.parentNode;
var tb = obj.parentNode.parentNode.parentNode;
var index = row.rowIndex;
tb.deleteRow(index);
}
</script>
</head>
<body>
<form id="listForm" method="post" enctype="multipart/form-data" action="xxxx!${isAddAction?'save':'update'}.action" class="form-horizontal" role="form">
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="row listmenu">
<div class="col-xs-4 col-lg-4 col-sm-9 top-left text-muted">
<h5><span class="glyphicon glyphicon-user"></span>数据库表管理 </h5>
</div>
<div class="col-xs-8 col-lg-8 col-sm-3">
<div class="devider-vertical"></div>
<div class="align-right">
<button type="button" class="btn btn-default btn-sm" οnclick="javascript:history.back(-1)"><span class="glyphicon glyphicon-remove-circle"></span>取消</button>
<button type="submit" class="btn btn-primary btn-sm sub"><span class="glyphicon glyphicon-ok-circle"></span>确定</button>
</div>
</div>
</div>
</div>
</nav>
<div class="container-fluid table-right">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#tabuser" data-toggle="tab">数据表信息</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tabuser">
<input type="hidden" name="id" id="id" value="" />
<div class="form-group" style="float: left; width: 1000px; height:30px;">
<label class="col-sm-1 control-label" >表名称</label>
<div class="col-sm-2">
<div class="input-group">
<input type="text" class="form-control" title="数据库表名如：BASE_USER"
name=".tableName" value="" placeholder="表名称" maxlength="30"
oninvalid="setCustomValidity('亲，表名称不能为空噢')" οninput="setCustomValidity('')" required/>
<span class="input-group-addon bgcolor-FFF"><font color="red">*</font></span>
</div>
</div>
<label class="col-sm-1 control-label">中文名称</label>
<div class="col-sm-2">
<div class="input-group">
<input type="text" class="form-control" name=".dbName" value="" placeholder="中文名称" maxlength="32"/>
</div>
</div>
</div>
<div class="tab-pane" id="tab2">
<table class="table table-bordered table-hover" id="table">
<tr class="active">
<td>字段名称</td>
<td>字段类型</td>
<td>字段长度</td>
<td>是否为空</td>
<td>默认值</td>
<td>索引</td>
<td>中文名称</td>
<td>操作</td>
</tr>
<tr class="data">
<td>
<input type="text" name="" placeholder="字段名称" value="" /><font color="red"> *</font>
</td>
<td>
<select class="form-control" id="columntype" name="">
<option value="NULL" ${(columntype=='NULL')?'selected="selected"':'' }>NULL</option>
<option value="INTEGER" ${(columntype=='INTEGER')?'selected="selected"':'' }>INTEGER</option>
<option value="REAL" ${(columntype=='REAL')?'selected="selected"':'' }>REAL</option>
<option value="TEXT" ${(columntype=='TEXT')?'selected="selected"':'' }>TEXT</option>
<option value="BLOB" ${(columntype=='BLOB')?'selected="selected"':'' }>BLOB</option>
</select>
</td>
<td>
<input type="text" name="" placeholder="字段长度" value="" />
</td>
<td>
<input type="checkbox" id="nullable" name="" checked="checked">可为空
</td>
<td>
<input type="text" name="" placeholder="默认值" value="" />
</td>
<td>
<select class="form-control" id="indexInfo" name="">
<option value="" ${(columntype=='')?'selected="selected"':'' }></option>
<option value="Primary Key" ${(columntype=='Primary Key')?'selected="selected"':'' }>Primary Key</option>
<option value="Primary Key" ${(columntype=='Foreign Key')?'selected="selected"':'' }>Foreign Key</option>
</select>
</td>
<td>
<input type="text" name="" placeholder="中文名称" value="" />
</td>
<td>
<input type="button" name="button" value="删除" id="deleteTable" οnclick="delTableRow(this)"/>
</td>
</tr>
<tr>
                     
<input type="button" value="添加" id="addTable">
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-sm" οnclick="javascript:history.go(-1)"><span class="glyphicon glyphicon-remove-circle"></span>取消</button>
<button type="submit" class="btn btn-primary btn-sm sub"><span class="glyphicon glyphicon-ok-circle"></span>确定</button>
</div>
</form>
</body>
</html>

li243306411

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
点击添加自动添加一行，点击删除自动删除当前行。

pageEncoding="UTF-8"%>数据库表管理-数据库表编辑/css/fileuploadstyles.css">/css/bootstrap-datetimepicker.min.css" media="screen">/js/createdom.js">/js/jquery.Jcrop.min.js">//JQUERY执行方法$
复制链接

扫一扫