經典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元素過濾掉了