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`下拉列表的功能。...
3. **使用Excel表格(Table)**:将数据转换为Excel表格,它自带的下拉列表功能可以自动更新,当新增或删除选项时,与之关联的下拉列表会自动调整。 4. **使用辅助列和查找函数**:创建辅助列,根据用户在主列中的...
使用javascript实现table动态增加删除行列。
3. **SELECT/BOBOX**:下拉列表,用户从预设的选项中选择。 4. **POPWINDOW**:弹出窗口,可以打开一个新的对话框进行更复杂的交互。 5. **DATE**:日期格式,用户输入或选择日期。 6. **N**:数字格式,确保用户...
对于下拉选择的`fildtp`列,我们可以使用`el-select`配合`v-for`指令动态渲染选项: ```html 类型"> v-for="item in fildtps" :key="item.value" :label="item.text" :value="item.value" > ``...
- **性别字段的设置**:同样,也可以通过函数或下拉列表的方式设置性别字段。 #### 学员编号的生成与更新 为了确保每个学员都有唯一的编号,本教程提供了两种不同的方法来实现这一目标: 1. **建立最大学员变量**...
用户还可以按颜色或日期筛选数据,在“自动筛选”下拉列表中显示 1000 多个项,选择要筛选的多个项,以及在数据透视表中筛选数据。 Excel 表格的增强功能是 Excel 2007 中的一个新增功能。用户可以使用新用户界面...
26. 列类型:SmartGrid定义了普通列、文本框列、复选框列、下拉列表框列四种列类型,程序员也可以定义自己的列类型。 27. 排序:用户可以通过点击列头对某列进行排序。SmartGrid提供了两种排序方式:客户端排序和...
本问题关注的是如何在Element UI的下拉多选框(`el-select`)中添加一个“全选”选项,使得用户能够一键选择所有可选项。以下是对这个功能实现的详细解释: 首先,我们需要创建一个基础的Vue.js应用,并引入Element...
- **`<option>`**: 定义下拉列表中的选项。 - **`<label>`**: 定义关联的`<input>`元素的标签。 - **`<fieldset>`**: 定义围绕表单元素的边界。 - **`<legend>`**: 定义`<fieldset>`元素的标题。 - **`<datalist>`**...
5. 动态元素:如果动态性涉及到交互式元素,如下拉列表、切片器或按钮,需要利用Excel的“开发工具”选项卡中的VBA(Visual Basic for Applications)编程来实现。VBA可以编写宏命令,根据用户的选择或操作更新图表...
- **`<datalist>`**: H5 新增,用于定义下拉列表。 - **`<keygen>`**: H5 新增,用于生成密钥对,主要用于数字签名。 - **`<output>`**: H5 新增,显示计算结果或其他输出信息。 #### 三、框架标签 - **`<frame>`*...
Bootstrap Table 是一个流行的前端数据展示框架,用于创建响应式、美观的表格。在这个场景中,我们需要在Bootstrap Table的某...希望上述步骤和解释能够帮助你成功地在Bootstrap Table中实现下拉框的动态显示和值获取。
- **JavaWeb**:包括Servlet、JSP(JavaServer Pages)等技术,用于构建动态网页。Servlet负责处理用户的请求,JSP则用来展示数据,实现前后端分离。 - **JavaEE(Java Enterprise Edition)**:提供了一整套企业...
12. `<datalist>`:定义下拉列表,HTML5新增。 13. `<keygen>`:定义生成密钥,HTML5新增。 14. `<output>`:定义输出结果,HTML5新增。 ### 图像和媒体标签 1. `<img>`:定义图像。 2. `<map>`:定义图像映射,...
3. 请求新数据:触发刷新请求,更新整个列表或部分区域的数据。 4. 恢复滚动:请求完成并更新DOM后,隐藏刷新指示器,恢复正常的滚动行为。 五、优化与兼容性 1. 响应式设计:确保在不同设备和屏幕尺寸上都有良好...
在jQuery EasyUI中,DataGrid是一种常用的表格展示控件,它可以与各种编辑器结合使用,如combobox(下拉框)来实现更丰富的交互功能。本文主要探讨的是如何利用jQuery EasyUI的DataGrid和combobox组件实现多级联动的...
【轻松制作自己的进销存表格】是一个教程,旨在教授用户如何根据自身需求定制进销存表格,以提高工作效率和满足个性化需求。进销存管理对于任何规模的企业都至关重要,但市面上的现成软件往往不能完全匹配公司的具体...
* datalist:定义下拉列表 * details:定义元素的细节 * figure:定义媒介内容的分组,以及它们的标题 * figcaption:定义 figure 元素的标题 * footer:定义 section 或 page 的页脚 * header:定义 section 或 ...