<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. 微信小程序支付以及微信退款开发

    最近公司项目急着测试,需要开发微信小程序+微信支付+微信退款,本着这几天的一些研究,决定记录一下开发的过程. 本着知识分享的原则,希望对大家有所帮助. 本篇针对的是微信小程序的支付开发,如果有对微信公 ...

  2. python数据库-MongoDB的基本使用(54)

    一.MongoDB 创建数据库 语法:MongoDB 创建数据库的语法格式如下: use DATABASE_NAME 如果数据库不存在,则创建数据库,否则切换到指定数据库. > use Hero ...

  3. 【深入浅出-JVM】(8):TLAB

    概念 TLAB(Thread Local Allocation Buffer)线程本地分配缓冲区(线程私有分配区,私有分配,公共查看),占用 Eden 区(缺省 Eden 的1%),默认开启,JVM ...

  4. python对Excel的读取

    在python自动化中,经常会遇到对数据文件的操作,比如添加多名员工,但是直接将员工数据写在python文件中,不但工作量大,要是以后再次遇到类似批量数据操作还会写在python文件中吗? 应对这一问 ...

  5. Linux 文件编程、时间编程基本函数

    文件编程 文件描述符 fd --->>>数字(文件的身份证,代表文件身份),通过 fd 可找到正在操作或需要打开的文件. 基本函数操作: 1)打开/创建文件 int open (co ...

  6. 网页缓存相关的HTTP头部信息详解

    前言 之前看完了李智慧老师著的<大型网站技术架构-核心原理与案例分析>这本书,书中多次提起浏览器缓存的话题,恰是这几天生产又遇到了一个与缓存的问题,发现自己书是没少看,正经走心的内容却不多 ...

  7. 使用SVG symbols建立图标系统完整指南

    从最开始的使用img图片,到后来的使用css sprite来减少服务器请求,再到流行的图形字体化图标Iconfont.现在,一种全新的图标使用方式开始流行了起来--SVG symbols图标. 工作原 ...

  8. C#各版本新增加功能

    本系列文章主要整理并介绍 C# 各版本的新增功能. C# 8.0 C#8.0 于 2019年4月 随 .NET Framework 4.8 与 Visual Studio 2019 一同发布,但是当前 ...

  9. python+selenium实现163邮箱登陆—iframe动态ID定位 及常用定位方法

    今天发现之前的登录163邮箱脚本定位不到iframe了,原因是iframe拼接了动态ID,修改后的脚本如下: from selenium import webdriver driver = webdr ...

  10. 前端响应式のmedia文件分离

    响应式cssのmedia文件分离 media简介 1.媒体查询,添加自CSS3 2.一个媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式表范围的表达式组成,允许内容的呈现针对一个特定范 ...