经典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元素过滤掉了