<form id="addNewsFormData" name="addNewsFormData" isCheck="true" action="controller.SysRuleModelController">
<table id="addNewsTableId" class="formTableSwap" border="0" align="center" cellpadding="0" cellspacing="1" >
<tr>
<th> 类型:</th>
<td >
<select id="dtomodelType" name="modelType">
<option value="1" >业务模型</option>
<option value="2" >实体类</option>
</select>
</td>
<th> 中文名 :</th>
<td >
<input type="text" class="text" id="dtochName" name="chName" notNull="false" maxLength="50" value="" />
</td>
<th> 英文名 :</th>
<td >
<input type="text" class="text" id="dtoenName" name="enName" notNull="false" maxLength="100" value="" />
</td>
</tr>
<tr>
<th> 备注 :</th>
<td colspan="5">
<textarea id="dtoremark" name="remark" maxLength="100" rows="5" cols="60"></textarea>
</td>
</tr>
</table>

属性管理
<div class="contentPanel">
<table id="tab" class="formTableSwap" border="0" align="center" cellpadding="0" cellspacing="1">
<tr>
<td style="width: 5px;">序号</td>
<td>属性中文名</td>
<td>属性英文名</td>
<td>数据类型</td>
<td>长度</td>
<td>引用字典编码</td>
<td>描述</td>
<td>操作</td>
</tr>
<tr id="1">
<td><input type="text" name="modelAttrs[0].sequence" value="1"></td>
<td><input type="text" class="text" name="modelAttrs[0].chName" notNull="false" maxLength="50" value="" ></td>
<td><input type="text" class="text" name="modelAttrs[0].enName" notNull="false" maxLength="100" value="" ></td>
<td>
<select name="modelAttrs[0].dataType" >
<option value="1" >字符型</option>
<option value="2" >数字型</option>
<option value="3" >日期型</option>
<option value="4" >浮点型</option>
</select>
</td>
<td><input type="text" class="text" name="modelAttrs[0].dataLong" maxLength="50" value="" ></td>
<td><input type="text" class="text" name="modelAttrs[0].dictCode" maxLength="50" value="" ></td>
<td><input type="text" class="text" name="modelAttrs[0].remark" maxLength="50" value="" ></td>
<td><a href="#" onclick="deltr(1)">删除</a></td>
</tr>
</table>
<table class="formTableSwap" border="0" align="center" cellpadding="0" cellspacing="1">
<tr><td style="text-align:right;width: 800px;"><input type="button" id="but" value="增加"/></td></tr>
</table>

</form>

</div>

</body>
<script type="text/javascript">
$(document).ready(function(){
//增加<tr/>
$("#but").click(function(){
var _len = $("#tab tr").length;
alert(_len)
$("#tab").append("<tr id="+_len+" align='center'>"
+'<td><input type="text" name="modelAttrs['+(_len-1)+'].sequence" value="'+_len+'"></td>'
+'<td><input type="text" class="text" name="modelAttrs['+(_len-1)+'].chName" notNull="false" maxLength="50" value="" ></td>'
+'<td><input type="text" class="text" name="modelAttrs['+(_len-1)+'].enName" notNull="false" maxLength="100" value="" ></td>'
+'<td><select name="modelAttrs['+(_len-1)+'].dataType">'
+'<option value="1" >数字型</option>'
+'<option value="2" >字符型</option>'
+'<option value="3" >日期型</option>'
+'<option value="4" >浮点型</option>'
+'</select></td>'
+'<td><input type="text" class="text" name="modelAttrs['+(_len-1)+'].dataLong" maxLength="50" value="" ></td>'
+'<td><input type="text" class="text" name="modelAttrs['+(_len-1)+'].dictCode" maxLength="50" value="" ></td>'
+'<td><input type="text" class="text" name="modelAttrs['+(_len-1)+'].remark" maxLength="50" value="" ></td>'
+"<td><a href=\'#\' onclick=\'deltr("+_len+")\'>删除</a></td>"
+"</tr>");
});

});

//删除<tr/>
function deltr(index){
//var _len = $("#tab tr").length;
$("tr[id='"+index+"']").remove();//删除当前行
}

js动态添加<tr><td>的更多相关文章

  1. JS从后台获取数据,前台动态添加tr标签中的td标签

    功能描述: 要求从后台查询该省份的所有城市,然后动态的再前台固定的tr标签中添加相应的td标签来展示城市基本信息: 文章目录 #一.前台jsp及js源码 jsp:在固定的tr标签中添加一个id,通过j ...

  2. js 动态添加表单 table tr

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. form表单 无法提交js动态添加的表单元素问题。。

    第一种情况, 这种情况js动态添加的表单元素是不能提交到服务器端的 <table> <form method="post" action=" url   ...

  4. 使用js动态添加组件

    在文章开始之前,我想说两点 1 自己初学js,文章的内容在大神看来可能就是不值一提,但是谁都是从hello world来的,望高   手不吝指教# 2 我知道这个标题起的比较蛋疼,大家看图就能说明问题 ...

  5. js动态添加onload、onresize、onscroll事件(另类方法)

    js动态添加onload.onresize.onscroll事件(另类方法)   window 的 onload.onresize.onscroll 事件,跟其他的事件不一样,它不能用 attachE ...

  6. 【原生js】js动态添加dom,如何绑定事件

    首先要明白浏览器在加载页面的时候是按顺序来加载的,这样以来就很清楚了,js动态添加dom以后,这些dom并没有绑定事件,这个时候最简单的一个办法就是:将绑定事件的方法封装到一个函数A中,在动态添加完d ...

  7. 原生JS动态添加和删除类

    原生JS动态添加和删除类 由于需要, 给按钮组监听点击事件(要求用事件委托),当有一个按钮被点击时,相应的给该按钮添加一个类(激活类),其他没有点击的按钮就要移出该类 添加和和删除类有三种方法 首先等 ...

  8. MUI 里js动态添加数字输入框后,增加、减少按钮无效

    numbox 的自动初化是在 mui.ready 时完成的mui 页面默认会自动初始化页面中的所有数字输入框,动态构造的 DOM 需要进行手动初始化.比如:您动态创建了一个 ID 为 abc 的数字输 ...

  9. 原生js动态添加style,添加样式

    原生js动态添加style,添加样式 第一种 var style="[assign-url='"+str+"']{display:initial}"; var ...

随机推荐

  1. Jmeter接口测试实例-牛刀小试

    本次测试的是基于HTTP协议的接口,主要是通过Jmeter来完成接口测试,借此熟悉Jmeter的基本操作. 本次实战,我是从网上找的接口测试项目,该项目提供了详细的接口文档,我们可以通过学习接口文档来 ...

  2. MPP install

    greenplum install 注意事项:1.hostname 不能大写##2.如果segment和mirror副本数比较大,建议调整/etc/ssh/sshd_config的maxconnect ...

  3. iPhone调试移动端webview

    一.模拟器调试 1.启动Xcode 2.选择菜单Xcode - Open Developer Tool - Simulator 3.启动Simulator后,选择Simulator菜单Hardware ...

  4. YuniKorn 介绍

    一.YuniKorn 简介 YuniKorn 是一种轻量级的通用资源调度程序,适用于容器编排系统.它的创建是为了一方面在大规模,多租户环境中有效地实现各种工作负载的细粒度资源共享,另一方面可以动态地创 ...

  5. 关键字static、final

    final final能修饰类.修饰方法.能修饰属性. 修饰类:该类不能被继承. 修饰方法:该方法不能被重写.所以abstract和final不能同时用 修饰属性/变量:该属性/变量为常量,该值不能再 ...

  6. C#4.0新增功能04 嵌入的互操作类型

    连载目录    [已更新最新开发文章,点击查看详细] 从 .NET Framework 4 开始,公共语言运行时支持将 COM 类型的类型信息直接嵌入到托管程序集中,而不要求托管程序集从互操作程序集中 ...

  7. ASP.NET Core 中的管道机制

    首先,很感谢在上篇文章 C# 管道式编程 中给我有小额捐助和点赞的朋友们,感谢你们的支持与肯定.希望我的每一次分享都能让彼此获得一些收获,当然如果我有些地方叙述的不正确或不当,还请不客气的指出.好了, ...

  8. HTML 去调table表单里面td之间的间距

    首先为大家展示一下最原始的代码和效果.直接在table中用td划分的表格会默认隐藏边框.  接下来我们用css来增加样式,为table增加边框. table { border: 1px solid # ...

  9. 什么是WebP以及如何在WordPress中使用WebP图像

    图像通常是缓慢加载网页的最大原因之一.它们不仅减慢了加载时间,而且还可以占用服务器上的大量空间和资源.仔细选择文件类型并压缩它们有助于降低加载速度,但它们只能在图像质量受损之前进行优化.另一种选择是使 ...

  10. ThinkPHP 添加数据到数据库失败

    ThinkPHP 添加数据到数据库失败 一般情况下会先检查一下几个方面 检查控制器或Model名是否有误 检查需要插入的数据是否为空或者缺失参数 检查数据表名及字段名称(大部分下都是字段名有误出错的) ...