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

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