列表单元格:

//两个 隐藏的 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%"
   onclick="modifyOrder()" id="modifyOrder">编辑排序</button>

 function modifyOrder(){
if($("#modifyOrder").html()=="编辑排序"){
$("#modifyOrder").html("保存排序");
$("td[id=ordinal]").each(function(){
if($(this).find("input").length!=1){
$(this).attr("contenteditable","true");
}
});
}else{
var orderRule=/^([1-9][0-9]{0,3})$/;
var flag=1;//保存
$("td[id=ordinal]").each(function(){
if($(this).find("input").length!=1){
var value=$.trim($(this).text());
if(!orderRule.test(value)){
flag=0;
if(value==""){
alert("排序码不能为空!");
}else if(value>9999){
alert("排序超出数值范围,请重新输入!");
}else{ alert("排序码只能为整数!");
} }
}
});
if(flag==1){//保存
$("td[id=ordinal]").each(function(){
if($(this).find("input").length!=1){
$(this).find("input")[0].value+=("/"+$(this).text());//两个 隐藏的 input, 第一个存 记录 id, 单元格内容是排序码
}
});
$.post("web?module=stwmgr&action=Advertisement&method=modifyAdvertisementOrdinal&tokenId=<%=request.getParameter("tokenId") %>",
$("#form2").serialize(),function(data){
$("#modifyOrder").html("编辑排序")
$("td[id=ordinal]").each(function(){
if($(this).find("input").length!=1){
$(this).attr("contenteditable","false");
}
});
alert("保存成功!")
});
}
}
}

后台代码:

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);
}
}
}
}

jsp table 表格单元格编辑示例的更多相关文章

  1. Bootstrap:Bootstrap_table第一篇:快速用bootstrap_table(支持参数)筛选并展示数据,固定表格前几列,实现表格单元格编辑

    1.准备好css和js文件 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstr ...

  2. ABBYY FineReader 15 新增编辑表格单元格功能

    ABBYY FineReader 15(Windows系统)新增编辑表格单元格功能,在PDF文档存在表格的前提下,可将表中的每个单元格作为单独的文字块进行单独编辑,单元格内的编辑不会影响同一行中其他单 ...

  3. javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行

    jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...

  4. 关于.net Microsoft.Office.Interop.Word组建操作word的问题,如何控制word表格单元格内部段落的样式。

    控制word表格单元格内部文字样式.我要将数据导出到word当中,对于word表格一个单元格中的一段文字,要设置不同的样式,比如第一行文字作为标题要居中,加粗,第二行为正常的正文. 代码如下 publ ...

  5. JavaScript动态改变表格单元格内容的方法

    本文实例讲述了JavaScript动态改变表格单元格内容的方法.分享给大家供大家参考.具体如下: JavaScript动态改变表格单元格的内容,下面的代码通过修改单元格的innerHTML来修改单元格 ...

  6. 关于html表格单元格宽度的计算规则

    * { margin: 0; padding: 0 } body { background: #fafafa } ul,li { list-style: none } h1 { margin: 20p ...

  7. html table中单元格自动换行

    table中单元格自动换行样式: table-layout: fixed; word-wrap: break-word;   table-layout 可能的值(IE不支持inherit属性) 值 描 ...

  8. colgroup中col定义表格单元格宽度

    colgroup中可以使用col来定义表格单元格宽度,可以使用像素(数字),百分比,我们来具体看看有什么不同. 先看一个最基本的:用像素(数字)表示,因为table有个宽度,这里表示占比 <ht ...

  9. easyui datagrid 单元格编辑(cell editing)

    demo中有row editing 项目中发现个cell editing,但是有bug,修改好了 主要实现功能:单击数据表格单元格,编辑单元格数据 js代码如下: $.extend($.fn.data ...

随机推荐

  1. Codeforces Round #394 (Div. 2) C. Dasha and Password 暴力

    C. Dasha and Password 题目连接: http://codeforces.com/contest/761/problem/C Description After overcoming ...

  2. Intel Code Challenge Final Round (Div. 1 + Div. 2, Combined) A. Checking the Calendar 水题

    A. Checking the Calendar 题目连接: http://codeforces.com/contest/724/problem/A Description You are given ...

  3. Western Subregional of NEERC, Minsk, Wednesday, November 4, 2015 Problem G. k-palindrome dp

    Problem G. k-palindrome 题目连接: http://opentrains.snarknews.info/~ejudge/team.cgi?SID=c75360ed7f2c7022 ...

  4. nuxus 3在Maven项目的配置和POM文件的配置

    在nuxus 3中的Maven默认会创建三个仓库,这三个仓库的关系如下: public是release和snapshot的全集,release默认为关闭状态,所以在配置nexus 3时需要将其开启. ...

  5. 将网桥的配置写进去/etc/sysconfig/network-scripts/ifcfg-xxx

    有时候需要使用网桥命令比如brctl设置一些网桥的属性,而这些方式能否同样写进去配置文件使其永久开机生效. 答案是不行的,也同样找过Ubuntu的,其实Ubuntu可以实现,参考:http://man ...

  6. A CANBus Tiny Network without Transceiver ICs : STM32F4 Discovery

    Sometimes you have a CAN equipped processor on a low cost board but it has no CAN transceiver chips. ...

  7. STM32F4xx -- Cortex M4

    STM32F4xx official page: http://www.st.com/internet/mcu/subclass/1521.jspIntroductionFPU - Floating ...

  8. Nginx FastCGI的运行原理

    http://www.cnblogs.com/yinshoucheng-golden/p/6474034.html

  9. Idea2018激活破解

    原文:https://www.imsxm.com/2018/07/idea-2018-1-5-crack-patcher.html 最近更新了Intellij IDEA到2018.1.5之后,使用之前 ...

  10. MySql错误处理(二) - Condition & Handle

    20.2.10. 条件和处理程序 20.2.10.1. DECLARE条件 20.2.10.2. DECLARE处理程序 特定条件需要特定处理.这些条件可以联系到错误,以及子程序中的一般流程控制. 2 ...