经典EL表达式和Jquery实现表格表单常用操作

2023-01-09 19:13| 来源: 网络整理| 查看: 265

表格选中，下拉框动态选中等基本功能经常用到，但是一段时间不操作又忘了在此做个记录就当是老年人备忘录：

EL表达式实现下拉框初始化选中使用loop属性在一个元素中遍历若干集合点击表格某一列中按钮获取该行所有列的值动态编辑表格内容一、 EL表达式实现下拉框初始化选中

EL表达式支持三元运算符，基于三余运算符的写法实现下拉菜单初始化

文本

这样我们就把满足条件的下拉框选中了

二、使用loop属性在一个元素中遍历若干集合

传统循环只能对一个集合进行遍历，但是有的时候我们需要像后台那样使用下标对多个集合进行操作

${目标元素属性} ${集合二[loop.count-1].属性} ${集合三[loop.count-1].属性} ${集合四[loop.count-1].属性}

这样就实现了在一个循环中使用多个集合做数据绑定

三、点击表格某一列中按钮获取该行所有列的值

我们有一个表格:

学号姓名性别年级操作 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 = $(""); // 设置文本框对象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元素过滤掉了

【本文地址】

公司简介

联系我们