jsp table 表格单元格编辑示例

列表单元格：

//两个 隐藏的 input, 第一个存 记录 id, 单元格内容是排序码 ：

<td id="ordinal"><%=ordinal%> <%
        if (!state.equals("已过期")) {
       %><input type="hidden" name="newOrdinal"
       value="<%=rec.getString("advertisementId")%>" /> <%
        }
       %><input type="hidden" value="<%=state%>" /></td>

　　

<button class="layui-btn layui-btn-sm" style="margin-left: 46%"
   οnclick="modifyOrder()" id="modifyOrder">编辑排序</button>

 

 1 function modifyOrder(){
 2     if($("#modifyOrder").html()=="编辑排序"){
 3         $("#modifyOrder").html("保存排序");
 4         $("td[id=ordinal]").each(function(){
 5             if($(this).find("input").length!=1){
 6                 $(this).attr("contenteditable","true");
 7             }
 8         });
 9     }else{        
10         var orderRule=/^([1-9][0-9]{0,3})$/;    
11         var flag=1;//保存
12         $("td[id=ordinal]").each(function(){
13             if($(this).find("input").length!=1){
14                 var value=$.trim($(this).text());
15                 if(!orderRule.test(value)){
16                     flag=0;
17                     if(value==""){
18                         alert("排序码不能为空！");    
19                     }else if(value>9999){
20                         alert("排序超出数值范围，请重新输入！");
21                     }else{
22                     
23                         alert("排序码只能为整数！");
24                     }
25                     
26                 }
27             }
28         });
29         if(flag==1){//保存
30             $("td[id=ordinal]").each(function(){            
31                 if($(this).find("input").length!=1){
32                     $(this).find("input")[0].value+=("/"+$(this).text());//两个 隐藏的 input, 第一个存 记录 id, 单元格内容是排序码    
33                 }
34             });            
35             $.post("web?module=stwmgr&action=Advertisement&method=modifyAdvertisementOrdinal&tokenId=<%=request.getParameter("tokenId") %>",
36                     $("#form2").serialize(),function(data){
37                 $("#modifyOrder").html("编辑排序")
38                 $("td[id=ordinal]").each(function(){            
39                     if($(this).find("input").length!=1){
40                         $(this).attr("contenteditable","false");
41                     }
42                 });
43                 alert("保存成功！")
44             });
45         }
46     }
47 }

 

后台代码：

public void modifyAdvertisementOrdinal() throws SystemException {
        String[] ordinalArray=getParameterValues("newOrdinal");
        AdvertisementDAO dao=AppDAO.createAdvertisementDAO();
        for (String string : ordinalArray) {
            String[] arr=string.split("/");
            if(!arr[1].equals("0")){
                try {
                    dao.editAdvertisementOrdinal(arr[0], arr[1].trim());
                } catch (Exception e) {
                    throw new SystemException(e);
                }
            }
        }
    }