js在指定的table行后添加新行（js实现select数据的填充，添加行，删除行）
2015-01-08 18:37
357 查看
<pre><pre><!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=utf-8" />
<title>无标题文档</title>
<style>
body{width:900px; height:600px;margin: 0px auto; }
body,ul,table,li,pre,dd,dt,tr,th,td,{padding:0px;border:0px; margin:0px;font-size: 14px;}
.container{text-align:center; border:1px solid #F00;text-align:center;}
.form-horizontal {
position: relative;
padding: 100px 50px;
}
.form-group {
margin-left: 50px;
margin-right: 50px;
height: 35px;
}
.btn{color: #FFF;background-color: #62be4f;border-color: #2582d3;display: inline-block;padding: 4px 20px;margin-bottom: 0;font-size: 14px;font-weight: 400;line-height: 1.42857143;text-align: center;white-space: nowrap;vertical-align: middle;cursor: pointer;-webkit-user-select:
none;-moz-user-select: none;-ms-user-select: none;user-select: none;background-image: none;border: 1px solid #ffffff;border-radius: 4px;}
.form-control{width: 100px;height: 35px;padding: 5px 2px;}
.h100{height:100px}
.h150{height:150px}
.w500{width:500px;}
</style>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div class="container">
<table id="longTable" class="form-horizontal">
<tr class="form-group"><td colspan="1">客户名称：</td>
<td colspan="5"><input id="bussName" name="bussName" type="text" class="form-control w500" autocomplete="off"></td></tr>
<tr class="form-group"><td colspan="1" >认证码</td>
<td colspan="5"> <input id="verifyCode" name="verifyCode" type="text" class="form-control w500"/></td>
</tr>
<tr id="formgroup" class="form-group"><td colspan="1" >授权人：</td>
<td colspan="5"> <button onclick="addPerson()" class="btn btn_import mr_20"style="margin-top:-5px;" >添加授权人</button></td>
</tr>
<tr class="form-group"><th class="form-group"></th><th class="form-group"><center>姓名</center></th><th class="form-group"><center>职务</center></th><th class="form-group"><center>证件类型</center></th><th class="form-group"><center>证件号码</center></th><th
class="form-group"><center>操作</center></th></tr>
<tr class="form-group" ><td colspan="1">备注:</td>
<td colspan="5">
<textarea class="form-control w500 h100 " id="memo" name="memo" rows="5" cols="50"></textarea>
</td>
</tr>
<tr class="form-group" style="text-align:center"><td colspan='6'>
<button type="button" onclick="sure();" id="submit_btn" class="btn btn-primary btn-lg"> 确 定 </button>
<input type="reset" onclick="history.go(0);" id="cancel" value=" 取 消 " class="btn btn-default btn-lg">
</td></tr>
</table>
</div>
</body>
</html>
<script>
var optionHtml = new Array();
/**
* 初始化数据字典信息证件类型
*将数据保存到optionHtml数组中
*/
var arr = ["身份证","身份证","身份证","身份证","身份证","身份证"];
$(function(){
//设置模板的证件类型下拉框
optionHtml.length = 0;
for(var i = 0; i < 6; i++){
optionHtml.push("<option value='"+i+"'>"+ arr[i] +"</option>");
}
});
/**
*点击下一步的事件函数
*/
function next(){
if('2'==$("#cwfType").val()){
$("#long_cwf").show();
$("#cwfTypeSelect").hide();
}
};
/**
*js自动生成五个授权人列
*生成规则 1、添加授权人
*/
var j =1;
var arrayA = new Array();
function addPerson(){
if(arrayA.length<5){
//保证添加下一个授权人时，上一个授权人的信息已经填写
/**
if(''==$("#name"+(j-1)).val()||''==$("#position"+(j-1)).val()||''==$("#cardNo"+(j-1)).val()){
art.dialog({
lock: true,
background: '#600', // 背景色
esc:true,
opacity: 0.87, // 透明度
content: '请先填写授权人员信息！',
skin: 'default',
icon: 'alert',
yesText: '确 定',
yesFn: function(){
return true;
}
});
return ;
}*/
$("#longTable tr:eq("+(3+arrayA.length)+")").after("<tr id='seq"+j+"' class='form-group'><td></td><td><input class='form-control' id='name"+j+"' type='text'/></td>"
+"<td ><input class='form-control' id='position"+j+"' type='text'/></td>"
+"<td><select class='form-control' name='cardType' type='text' id='cardType"+j+"'>"+optionHtml.join('')+"</select></td>"
+"<td><input class='form-control' id='cardNo"+j+"'+ type='text' /></td>"
+"<td><a href='javascript:remove("+j+");'>删除</a></td></tr>");
arrayA.push(j);
j++;
}else{
art.dialog({
content: '最多添加五个授权人！',
skin: 'default',
icon: 'alert',
lock: true,
esc:true,
yesText: '确 定',
yesFn: function(){
return true;
}
});
return false;
}
};
function remove(t){
var post = arrayA.indexOf(t);
arrayA.splice(post,1);
$("#longTable #seq"+t).remove();
}
function sure(){
for(var m =0;m<arrayA.length;m++){
var p=arrayA[m];
if(!(name(p)&&position(p)&&cardNo(p))){
return;
}
}
}
function name(s){
var value=$("#name"+s).val();
var reg=new RegExp("[^%&',;=?$\"]+");
if(''==value||!reg.test(value)){
art.dialog({
content: '姓名不能为空或者包含特殊字符',
skin: 'default',
icon: 'alert',
lock: true,
esc:true,
yesText: '确 定',
yesFn: function(){
$("#name"+s).focus(); return true;
}
});
}else{
return true;
}
}
function position(s){
var value=$("#position"+s).val();
var reg=new RegExp("[^%&',;=?$\"]+");
//var reg = new RegExp("[^%&',;=?$\x22]+");
if(!reg.test(value)||''==value){
alert("职位不能为空或者包含^%&',;=?$\"等字符");
$("#position"+s).focus(); return false ;
}else{
return true;
}
}
function cardNo(s){
var value=$("#cardNo"+s).val();
var reg = new RegExp("^[A-Za-z0-9]+$");
if(!reg.test(value)||''==value){
alert("证件号码不合法");
$("#cardNo"+s).focus(); return false ;
}else{
return true;
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{width:900px; height:600px;margin: 0px auto; }
body,ul,table,li,pre,dd,dt,tr,th,td,{padding:0px;border:0px; margin:0px;font-size: 14px;}
.container{text-align:center; border:1px solid #F00;text-align:center;}
.form-horizontal {
position: relative;
padding: 100px 50px;
}
.form-group {
margin-left: 50px;
margin-right: 50px;
height: 35px;
}
.btn{color: #FFF;background-color: #62be4f;border-color: #2582d3;display: inline-block;padding: 4px 20px;margin-bottom: 0;font-size: 14px;font-weight: 400;line-height: 1.42857143;text-align: center;white-space: nowrap;vertical-align: middle;cursor: pointer;-webkit-user-select:
none;-moz-user-select: none;-ms-user-select: none;user-select: none;background-image: none;border: 1px solid #ffffff;border-radius: 4px;}
.form-control{width: 100px;height: 35px;padding: 5px 2px;}
.h100{height:100px}
.h150{height:150px}
.w500{width:500px;}
</style>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div class="container">
<table id="longTable" class="form-horizontal">
<tr class="form-group"><td colspan="1">客户名称：</td>
<td colspan="5"><input id="bussName" name="bussName" type="text" class="form-control w500" autocomplete="off"></td></tr>
<tr class="form-group"><td colspan="1" >认证码</td>
<td colspan="5"> <input id="verifyCode" name="verifyCode" type="text" class="form-control w500"/></td>
</tr>
<tr id="formgroup" class="form-group"><td colspan="1" >授权人：</td>
<td colspan="5"> <button onclick="addPerson()" class="btn btn_import mr_20"style="margin-top:-5px;" >添加授权人</button></td>
</tr>
<tr class="form-group"><th class="form-group"></th><th class="form-group"><center>姓名</center></th><th class="form-group"><center>职务</center></th><th class="form-group"><center>证件类型</center></th><th class="form-group"><center>证件号码</center></th><th
class="form-group"><center>操作</center></th></tr>
<tr class="form-group" ><td colspan="1">备注:</td>
<td colspan="5">
<textarea class="form-control w500 h100 " id="memo" name="memo" rows="5" cols="50"></textarea>
</td>
</tr>
<tr class="form-group" style="text-align:center"><td colspan='6'>
<button type="button" onclick="sure();" id="submit_btn" class="btn btn-primary btn-lg"> 确 定 </button>
<input type="reset" onclick="history.go(0);" id="cancel" value=" 取 消 " class="btn btn-default btn-lg">
</td></tr>
</table>
</div>
</body>
</html>
<script>
var optionHtml = new Array();
/**
* 初始化数据字典信息证件类型
*将数据保存到optionHtml数组中
*/
var arr = ["身份证","身份证","身份证","身份证","身份证","身份证"];
$(function(){
//设置模板的证件类型下拉框
optionHtml.length = 0;
for(var i = 0; i < 6; i++){
optionHtml.push("<option value='"+i+"'>"+ arr[i] +"</option>");
}
});
/**
*点击下一步的事件函数
*/
function next(){
if('2'==$("#cwfType").val()){
$("#long_cwf").show();
$("#cwfTypeSelect").hide();
}
};
/**
*js自动生成五个授权人列
*生成规则 1、添加授权人
*/
var j =1;
var arrayA = new Array();
function addPerson(){
if(arrayA.length<5){
//保证添加下一个授权人时，上一个授权人的信息已经填写
/**
if(''==$("#name"+(j-1)).val()||''==$("#position"+(j-1)).val()||''==$("#cardNo"+(j-1)).val()){
art.dialog({
lock: true,
background: '#600', // 背景色
esc:true,
opacity: 0.87, // 透明度
content: '请先填写授权人员信息！',
skin: 'default',
icon: 'alert',
yesText: '确 定',
yesFn: function(){
return true;
}
});
return ;
}*/
$("#longTable tr:eq("+(3+arrayA.length)+")").after("<tr id='seq"+j+"' class='form-group'><td></td><td><input class='form-control' id='name"+j+"' type='text'/></td>"
+"<td ><input class='form-control' id='position"+j+"' type='text'/></td>"
+"<td><select class='form-control' name='cardType' type='text' id='cardType"+j+"'>"+optionHtml.join('')+"</select></td>"
+"<td><input class='form-control' id='cardNo"+j+"'+ type='text' /></td>"
+"<td><a href='javascript:remove("+j+");'>删除</a></td></tr>");
arrayA.push(j);
j++;
}else{
art.dialog({
content: '最多添加五个授权人！',
skin: 'default',
icon: 'alert',
lock: true,
esc:true,
yesText: '确 定',
yesFn: function(){
return true;
}
});
return false;
}
};
function remove(t){
var post = arrayA.indexOf(t);
arrayA.splice(post,1);
$("#longTable #seq"+t).remove();
}
function sure(){
for(var m =0;m<arrayA.length;m++){
var p=arrayA[m];
if(!(name(p)&&position(p)&&cardNo(p))){
return;
}
}
}
function name(s){
var value=$("#name"+s).val();
var reg=new RegExp("[^%&',;=?$\"]+");
if(''==value||!reg.test(value)){
art.dialog({
content: '姓名不能为空或者包含特殊字符',
skin: 'default',
icon: 'alert',
lock: true,
esc:true,
yesText: '确 定',
yesFn: function(){
$("#name"+s).focus(); return true;
}
});
}else{
return true;
}
}
function position(s){
var value=$("#position"+s).val();
var reg=new RegExp("[^%&',;=?$\"]+");
//var reg = new RegExp("[^%&',;=?$\x22]+");
if(!reg.test(value)||''==value){
alert("职位不能为空或者包含^%&',;=?$\"等字符");
$("#position"+s).focus(); return false ;
}else{
return true;
}
}
function cardNo(s){
var value=$("#cardNo"+s).val();
var reg = new RegExp("^[A-Za-z0-9]+$");
if(!reg.test(value)||''==value){
alert("证件号码不合法");
$("#cardNo"+s).focus(); return false ;
}else{
return true;
}
}
</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Js实现动态添加删除Table行
- js动态添加表格数据使用insertRow和insertCell实现
- 通过js实现2个select控件的交换数据
- js实现简单的动态添加或删除一行数据
- 头结点链表的添加结点，删除结点，链表逆序，删除指定数据等操作的实现
- 原生js实现查找/添加/删除/指定元素的class
- 使用Bootstrap + Vue.js实现 添加删除数据
- Jquery+Ajax实现Select动态添加数据
- d3.js实现enter()添加元素d（数据绑定-data binding）
- js实现h5日期选择类似携程，日期上可以添加价格，是否休息，折扣等数据等等..
- JS小功能(操作Table--动态添加删除表格及数据)实现代码
- JS数据交互：动态从数据库中获取数据填充Select
- js简单实现Select互换数据的方法
- js 从一个select选择数据添加到另一个select(包括移除)
- 原声js和jQuery去实现，去指定那个数据被选中
- 控件之DataGrid----实现自动添加新行和数据交换
- js 查询XML数据添加到HTML select控件
- js 实现拷贝页面文本数据时，给文本结尾添加文本的出处”<p>这段文本来自我的js练习</p>”。
- js实现表格添加数据
- Js实现动态添加删除Table行示例