<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. Linux命令学习-tar命令

    Linux中,tar命令的全称是tape archive,主要作用是压缩和解压文件. 参数说明: -c 创建新的压缩档案 -x 解压档案 -t 列出压缩档案的内容 -z 使用gzip来解压和压缩,文件 ...

  2. kuangbin专题 专题二 搜索进阶 哈密顿绕行世界问题 HDU - 2181

    题目链接:https://vjudge.net/problem/HDU-2181 题意:一个规则的实心十二面体,它的 20个顶点标出世界著名的20个城市,你从一个城市出发经过每个城市刚好一次后回到出发 ...

  3. dubbo webservice 区别

    DUBBO中可以设置采用webservice方式,进行数据交互. 随着交互系统的增多,这种方式对系统的侵入性越来越大,关系更为错综复杂,很容易出错. 较适用与外围系统通信,若是内部系统间则会出现以上较 ...

  4. Java底层技术系列文章-hashcode深入理解

    带着问题去理解: 1. Object类HashCode方法是如何实现的,和String类有什么区别? 2.HashCode和Equals之间的关系? 一.hashCode作用 hashCode方法返回 ...

  5. 9.5 考试 第三题 奇袭题解(codeforce 526f)

    问题 C: 奇袭 时间限制: 1 Sec  内存限制: 256 MB 题目描述 由于各种原因,桐人现在被困在Under World(以下简称UW)中,而UW马上 要迎来最终的压力测试——魔界入侵. 唯 ...

  6. Appium+python自动化(二十)- 猴哥失散多年的混血弟弟还是妹妹- Monkey(猴子)日志(超详解)

    简介 日志是非常重要的,用于记录系统.软件操作事件的记录文件或文件集合,可分为事件日志和消息日志.具有处理历史数据.诊断问题的追踪以及理解系统.软件的活动等重要作用,在开发或者测试软系统过程中出现了问 ...

  7. Guid几种格式及之间的互换,以及利用Base64缩短guid的长度到22个字符和还原

    1.Guid.NewGuid().ToString("N") 结果为: 38bddf48f43c48588e0d78761eaa1ce6 2.Guid.NewGuid().ToSt ...

  8. Lucene03--字段属性

    Lucene03--字段属性 1.Field 1.1  Field相当于Javabean的属性. 1.2  不同的Field的构造方法参数不一样: 大多数Field的构造函数有三个参数: a)第一个参 ...

  9. vue-cli安装搭建初始项目

    vue-cli脚手架 前提:node + npm 安装好 一.介绍 vue-cli: Vue + ESLint + webpack + iview + ES6 Vue:主要框架ESLint:帮助我们检 ...

  10. Python小故事--------Tkinter的组件描述及解析

    概念 Tkinter: 是Tk图形用户界面工具包标准(ctl)的Python接口,作为一个轻量级的跨平台图形用户界面(GUI)开发工具 frame: 屏幕上的一块矩形区域,多是用来作为容器(conta ...