经典EL表达式和Jquery实现表格表单常用操作
表格选中,下拉框动态选中等基本功能经常用到,但是一段时间不操作又忘了在此做个记录就当是老年人备忘录:
- EL表达式实现下拉框初始化选中
- 使用loop属性在一个元素中遍历若干集合
- 点击表格某一列中按钮获取该行所有列的值
- 动态编辑表格内容
一、 EL表达式实现下拉框初始化选中
EL表达式支持三元运算符,基于三余运算符的写法实现下拉菜单初始化
<c:forEach items="${目标集合}" var="集合元素">
<option value="${集合元素.属性}"
${admin.id==annSrarch.scr?'selected':''}>
文本
</option>
</c:forEach>
这样我们就把满足条件的下拉框选中了
二、 使用loop属性在一个元素中遍历若干集合
传统循环只能对一个集合进行遍历,但是有的时候我们需要像后台那样使用下标对多个集合进行操作
<c:forEach items="${目标集合}" var="目标元素" varStatus="loop">
<tr>
<td>${目标元素属性}</td>
<td>${集合二[loop.count-1].属性}</td>
<td>${集合三[loop.count-1].属性}</td>
<td>${集合四[loop.count-1].属性}</td>
</tr>
</c:forEach>
这样就实现了在一个循环中使用多个集合做数据绑定
三、点击表格某一列中按钮获取该行所有列的值
我们有一个表格:
学号 | 姓名 | 性别 | 年级 | 操作 |
---|---|---|---|---|
001 | 张三 | 男 | 二年级 | 按钮 |
002 | 李四 | 男 | 二年级 | 按钮 |
003 | 王五 | 男 | 二年级 | 按钮 |
方法一:我们给按钮添绑定一个点击事件,通过jquery选择器选择到这一个tr并且添加一个name=”theOne”属性,同时改变背景颜色,代码如下:
//绑定一个事件
$("选择到按钮").each(function () {
$(this).click(function () {
//先清除所有tr的背景样式和name
$("#ttbody").children("tr")
.css("backgroundColor","#FFFFFF")
.end().children("tr").attr("name","");
//再设置自身父节点的背景颜色和name
$(this).parent("tr")
.css("backgroundColor","#E1E9FD")
.end().parent("tr").attr("name","theOne");
//然后根据name属性获取到tr进而获取到某一列的值
var $text = $("[name='theOne']")
.children("td:eq(index)").text()
});
})
方法二:我们给按钮添绑定一个点击事件,通过jquery的链式写法直接实现效果,代码如下:
//绑定一个事件
$("选择到按钮").each(function () {
$(this).click(function () {
//先清除所有tr的背景样式和name
$("#ttbody").children("tr")
.css("backgroundColor","#FFFFFF")
.end().children("tr").attr("name","");
//取值
var $text = $(this).parent().parent()
.css("backgroundColor","#FFFFFF").end()
.children("td:eq(index)").text();
});
})
四、动态编辑表格内容
表格还是这个表格:
学号 | 姓名 | 性别 | 年级 | 操作 |
---|---|---|---|---|
001 | 张三 | 男 | 二年级 | 编辑 |
002 | 李四 | 男 | 二年级 | 编辑 |
003 | 王五 | 男 | 二年级 | 编辑 |
我们想要点击按钮时直接在表格上编辑,首先我们给操作按钮绑定一个点击事件,先将”编辑”改为”确认”,然后获取到这一行所有的td,将td的值循环存到input 中,清除td的值,将input 追加到td中,点击确认按钮反之,代码如下:
$(function() {
// 定义删除函数
function deleteRow(btn) {
// 把获取dom按钮元素转换为jQuery对象
var $btn = $(btn);
// 获取当前按钮所在行
var $tr = $btn.parent().parent();
// 移除当前行
$tr.remove();
}
// 定义修改函数
function updateRow(btn) {
// 把获取dom按钮元素转换为jQuery对象
var $btn = $(btn);
// 获取按钮上面文本
var $val = $btn.val();
// 获取当前编辑行
var $tr = $btn.parent().parent();
// 获取当前编辑行中所有td对象不包含最后一个
var $tds = $tr.children("td:not(td:last)");
if ($val == "修改") {
// 改变按钮的文本
$btn.val("确认");
// 循环每一列对象
$tds.each(function() {
// 获取当前遍历单元格内文本
var $val = $(this).text();
// 设置单元格中文本为空
$(this).text("");
// 创建文本框保存单元格中文本
var $input = $("<input type='text' />");
// 设置文本框对象value值
$input.val($val);
// 把创建文本框对象追加到当前单元格中
$input.appendTo($(this));
});
} else if ($val == "确认") {
$btn.val("修改");
// 循环每一列对象
$tds.each(function() {
// 获取单个中文本框
var $input = $(this).children("input");
// 获取当前遍历单元格内文本框中值
var $val = $input.val();
// 移除单元格中文本框
$input.remove();
// 把文本框中获取值设置到当前单元格中
$(this).text($val);
});
$.each($tds,function() {
alert($(this).text());
});
}
}
然后我们获取这一行中的id 和各个列的值传到后台进行update操作,就实现了表格动态编辑修改功能。
说到获取id和有效列值,id一般放在tr的隐藏域中,最后一列为操作列,它的值对于我们来说是无效的。实现td过滤有两种方法:
方法一:使用jquery选择器过滤,代码如下:
var $tds = $tr.children("td:not(td:last)");
方法二:使用jquery数组的splice(index,length)方法,代码如下:
var arrList = ['a','b','c','d'];
arrList.splice(3,1);
这样我们就将最后一个d元素过滤掉了