`
旷世cC
  • 浏览: 25621 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

动态新增表格与下拉列表

 
阅读更多
web页面
关于动态新增表格的js
<script type="text/javascript">
		function addtabfun(){
			var tr = $("#itb tr").eq(1).clone();
			var last=$("#itb tr").last().attr("index");
			if(last==null){
			   last="0";
			}
			var tabsize=parseInt(last) + 1;
			$(tr).attr("index",tabsize);
			
			var lasttr=$("#itb tr").last()
			var name=$("select",lasttr).attr("name");
			var startindex=name.indexOf("[")+1;
			var endindex=name.indexOf("]");
			name=name.substring(0,startindex)+(parseInt(name.substring(startindex,endindex))+1)+name.substring(endindex,name.length);
			$("select",tr).attr("name",name);
			
			tr.find("td").get(1).innerHTML = "<input type=\"text\" name=\"punishGist\" class=\"punishGist\"/>";
			tr.find("td").get(2).innerHTML = "扣<input type=\"text\" name=\"score\" class=\"score\"/>分";
	        tr.show();
	        tr.appendTo("#itb");
		}
	</script>

页面中itb表格
<table cellSpacing=1 cellPadding=0 width="100%" align=center bgColor=#cccccc border=0 id="itb">
						<tr class="rowoutdark2">
							<td width="15%" align="center">案件性质</td>
		               		<td width="15%" align="center">处理依据</td>
		               		<td width="17%" align="center">处理结果 </td>
		               		<td width="10%" align="center">
                            <c:if test="${not requestScope.view }"> <a href="#" onClick="addtabfun()">新增</a></c:if>
                            </td>
						</tr>
						<tr class="rowoutdarkwhite" style="display: none">
							<td align="center">
                            <select name="dedustionchilds[0].badStandardId" class="badStandard">
                               <option value="">请选择违规企业行为</option>
							<c:forEach items="${request.badStandarList}" var="item">
                               <option value="${item.badStandardId}">${item.badStandardCode}</option>
							</c:forEach>                                                 
                            </select>
                             </td>
							<td align="center"><input type="text" name="punishGist" class="punishGist"/></td>
							<td align="center">扣<input type="text" name="score" class="score"/>分</td>
							<td align="center"><a href="#" onClick="dlttabfun(this)">删除</a></td>
						</tr>
<c:if test="${not empty dedustionchilds}">
<c:forEach items="${dedustionchilds}"  var="item" varStatus="mm">
     					<tr class="rowoutdarkwhite">		
							<td align="center">
							<input type="hidden" name="dedustionchilds[${mm.count}].deductionPointSubId" value="${item.deductionPointSubId}"/>
							<select name="dedustionchilds[${mm.count}].badStandardId" class="badStandard reloaddata">
                               <option value="">请选择违规企业行为</option>
							<c:forEach items="${request.badStandarList}" var="iitem">
                               <option value="${iitem.badStandardId}" <c:if test="${iitem.badStandardId==item.badStandardId}">selected</c:if> >${iitem.badStandardCode}</option>
							</c:forEach>                                                 
                            </select>
							</td>
							<td align="center"><input type="text" name="punishGist" class="punishGist"/></td>
							<td align="center">扣<input type="text" name="score" class="score"/>分</td>
							<td align="center"><a href="#" onClick="dlttabfun(this)">删除</a></td>
						</tr>
</c:forEach>
</c:if>	
<c:if test="${ empty dedustionchilds}">		
                      <tr class="rowoutdarkwhite">		
							<td align="center"><s:select list="%{#request.badStandarList}" name="dedustionchilds[1].badStandardId" cssClass="badStandard"  listKey="badStandardId" listValue="badStandardCode" headerKey="" headerValue="请选择违规企业行为" /></td>
							<td align="center"><input type="text" name="punishGist" class="punishGist"/></td>
							<td align="center">扣<input type="text" name="score" class="score"/>分</td>
							<td align="center"><a href="#" onClick="dlttabfun(this)">删除</a></td>
						</tr>
</c:if>							
					</table>

页面中根据下拉列表获取数据内容并填充到对应字段js
 <script language="JavaScript">
            function badstandchange(that){
           		if($(that).val() != ""){
					 $.ajax({
					   type:'post',
					   data:'badStandardId='+$(that).val(),
					   dataType:'json',
					   url:'<%=request.getContextPath()%>/credit/deductionPointAction!queryViewData.action',
					   success:function(info){
						   setitemvalue(that,info);
						}
					 });
				}
            }
			
	        function setitemvalue(sel,val){
				var p=$(sel).parent().parent();
				$("input.score",p).val(val.score);
				$("input.punishGist",p).val(val.punishGist);
			}
			$(document).ready(function() {
				$("select.reloaddata").each(function(index,obj){
					 badstandchange(obj);
				});
				$("select.badStandard").live('change',function(){
					badstandchange(this);
					
				});
			});
</script>
分享到:
评论

相关推荐

    在DataGridView控件中加入ComboBox下拉列表框的实现案例

    而为了增强用户交互和提供更多的操作选项,有时我们需要在`DataGridView`的单元格中集成`ComboBox`控件,这样用户就可以从下拉列表中选择值。本案例将详细介绍如何在`DataGridView`中实现`ComboBox`下拉列表的功能。...

    excel字段的下拉列表制作

    3. **使用Excel表格(Table)**:将数据转换为Excel表格,它自带的下拉列表功能可以自动更新,当新增或删除选项时,与之关联的下拉列表会自动调整。 4. **使用辅助列和查找函数**:创建辅助列,根据用户在主列中的...

    table动态增加删除行列

    使用javascript实现table动态增加删除行列。

    专题资料(2021-2022年)动态表格制作说明书.doc

    3. **SELECT/BOBOX**:下拉列表,用户从预设的选项中选择。 4. **POPWINDOW**:弹出窗口,可以打开一个新的对话框进行更复杂的交互。 5. **DATE**:日期格式,用户输入或选择日期。 6. **N**:数字格式,确保用户...

    Vue+Element实现表格编辑、删除、以及新增行的最优方法

    对于下拉选择的`fildtp`列,我们可以使用`el-select`配合`v-for`指令动态渲染选项: ```html 类型"&gt; v-for="item in fildtps" :key="item.value" :label="item.text" :value="item.value" &gt; ``...

    程矢Axure夜话图文教程中继器表格添加数据.pdf

    - **性别字段的设置**:同样,也可以通过函数或下拉列表的方式设置性别字段。 #### 学员编号的生成与更新 为了确保每个学员都有唯一的编号,本教程提供了两种不同的方法来实现这一目标: 1. **建立最大学员变量**...

    Excel2007新增功能.pdf

    用户还可以按颜色或日期筛选数据,在“自动筛选”下拉列表中显示 1000 多个项,选择要筛选的多个项,以及在数据透视表中筛选数据。 Excel 表格的增强功能是 Excel 2007 中的一个新增功能。用户可以使用新用户界面...

    Web表格控件[参照].pdf

    26. 列类型:SmartGrid定义了普通列、文本框列、复选框列、下拉列表框列四种列类型,程序员也可以定义自己的列类型。 27. 排序:用户可以通过点击列头对某列进行排序。SmartGrid提供了两种排序方式:客户端排序和...

    Element ui 下拉多选时新增一个选择所有的选项

    本问题关注的是如何在Element UI的下拉多选框(`el-select`)中添加一个“全选”选项,使得用户能够一键选择所有可选项。以下是对这个功能实现的详细解释: 首先,我们需要创建一个基础的Vue.js应用,并引入Element...

    HTML5 中的新标签。 基础 格式 表单 框架 图像 音频/视频 链接 列表 表格 样式

    - **`&lt;option&gt;`**: 定义下拉列表中的选项。 - **`&lt;label&gt;`**: 定义关联的`&lt;input&gt;`元素的标签。 - **`&lt;fieldset&gt;`**: 定义围绕表单元素的边界。 - **`&lt;legend&gt;`**: 定义`&lt;fieldset&gt;`元素的标题。 - **`&lt;datalist&gt;`**...

    Excel模板6-圆环图(动态).zip

    5. 动态元素:如果动态性涉及到交互式元素,如下拉列表、切片器或按钮,需要利用Excel的“开发工具”选项卡中的VBA(Visual Basic for Applications)编程来实现。VBA可以编写宏命令,根据用户的选择或操作更新图表...

    html速查表

    - **`&lt;datalist&gt;`**: H5 新增,用于定义下拉列表。 - **`&lt;keygen&gt;`**: H5 新增,用于生成密钥对,主要用于数字签名。 - **`&lt;output&gt;`**: H5 新增,显示计算结果或其他输出信息。 #### 三、框架标签 - **`&lt;frame&gt;`*...

    Bootstrap Table 在指定列中添加下拉框控件并获取所选值

    Bootstrap Table 是一个流行的前端数据展示框架,用于创建响应式、美观的表格。在这个场景中,我们需要在Bootstrap Table的某...希望上述步骤和解释能够帮助你成功地在Bootstrap Table中实现下拉框的动态显示和值获取。

    网上书店系统

    - **JavaWeb**:包括Servlet、JSP(JavaServer Pages)等技术,用于构建动态网页。Servlet负责处理用户的请求,JSP则用来展示数据,实现前后端分离。 - **JavaEE(Java Enterprise Edition)**:提供了一整套企业...

    html参考手册

    12. `&lt;datalist&gt;`:定义下拉列表,HTML5新增。 13. `&lt;keygen&gt;`:定义生成密钥,HTML5新增。 14. `&lt;output&gt;`:定义输出结果,HTML5新增。 ### 图像和媒体标签 1. `&lt;img&gt;`:定义图像。 2. `&lt;map&gt;`:定义图像映射,...

    HTML5模拟原生APP上拉加载,下拉刷新

    3. 请求新数据:触发刷新请求,更新整个列表或部分区域的数据。 4. 恢复滚动:请求完成并更新DOM后,隐藏刷新指示器,恢复正常的滚动行为。 五、优化与兼容性 1. 响应式设计:确保在不同设备和屏幕尺寸上都有良好...

    jQuery EasyUI编辑DataGrid用combobox实现多级联动

    在jQuery EasyUI中,DataGrid是一种常用的表格展示控件,它可以与各种编辑器结合使用,如combobox(下拉框)来实现更丰富的交互功能。本文主要探讨的是如何利用jQuery EasyUI的DataGrid和combobox组件实现多级联动的...

    轻松制作自己的进销存表格..pdf

    【轻松制作自己的进销存表格】是一个教程,旨在教授用户如何根据自身需求定制进销存表格,以提高工作效率和满足个性化需求。进销存管理对于任何规模的企业都至关重要,但市面上的现成软件往往不能完全匹配公司的具体...

    HTML5标签和属性列表.pdf

    * datalist:定义下拉列表 * details:定义元素的细节 * figure:定义媒介内容的分组,以及它们的标题 * figcaption:定义 figure 元素的标题 * footer:定义 section 或 page 的页脚 * header:定义 section 或 ...

Global site tag (gtag.js) - Google Analytics